/*! normalize.css v1.1.3 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 main,
 nav,
 section,
 summary {
     display: block;
 }
 
 /**
  * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
  */
 
 audio,
 canvas,
 video {
     display: inline-block;
     *display: inline;
     *zoom: 1;
 }
 
 /**
  * Prevent modern browsers from displaying `audio` without controls.
  * Remove excess height in iOS 5 devices.
  */
 
 audio:not([controls]) {
     display: none;
     height: 0;
 }
 
 /**
  * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
  * Known issue: no IE 6 support.
  */
 
 [hidden] {
     display: none;
 }
 
 /* ==========================================================================
    Base
    ========================================================================== */
 
 /**
  * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
  *    `em` units.
  * 2. Prevent iOS text size adjust after orientation change, without disabling
  *    user zoom.
  */
 
 html {
     font-size: 100%; /* 1 */
     -ms-text-size-adjust: 100%; /* 2 */
     -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /**
  * Address `font-family` inconsistency between `textarea` and other form
  * elements.
  */
 
 html,
 button,
 input,
 select,
 textarea {
     font-family: sans-serif;
 }
 
 /**
  * Address margins handled incorrectly in IE 6/7.
  */
 
 body {
     margin: 0;
 }
 
 /* ==========================================================================
    Links
    ========================================================================== */
 
 /**
  * Address `outline` inconsistency between Chrome and other browsers.
  */
 
 a:focus {
     outline: thin dotted;
 }
 
 /**
  * Improve readability when focused and also mouse hovered in all browsers.
  */
 
 a:active,
 a:hover {
     outline: 0;
 }
 
 /* ==========================================================================
    Typography
    ========================================================================== */
 
 /**
  * Address font sizes and margins set differently in IE 6/7.
  * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
  * and Chrome.
  */
 
 h1 {
     font-size: 2em;
     margin: 0.67em 0;
 }
 
 h2 {
     font-size: 1.5em;
     margin: 0.83em 0;
 }
 
 h3 {
     font-size: 1.17em;
     margin: 1em 0;
 }
 
 h4 {
     font-size: 1em;
     margin: 1.33em 0;
 }
 
 h5 {
     font-size: 0.83em;
     margin: 1.67em 0;
 }
 
 h6 {
     font-size: 0.67em;
     margin: 2.33em 0;
 }
 
 /**
  * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
  */
 
 abbr[title] {
     border-bottom: 1px dotted;
 }
 
 /**
  * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
  */
 
 b,
 strong {
     font-weight: bold;
 }
 
 blockquote {
     margin: 1em 40px;
 }
 
 /**
  * Address styling not present in Safari 5 and Chrome.
  */
 
 dfn {
     font-style: italic;
 }
 
 /**
  * Address differences between Firefox and other browsers.
  * Known issue: no IE 6/7 normalization.
  */
 
 hr {
     -moz-box-sizing: content-box;
     box-sizing: content-box;
     height: 0;
 }
 
 /**
  * Address styling not present in IE 6/7/8/9.
  */
 
 mark {
     background: #ff0;
     color: #000;
 }
 
 /**
  * Address margins set differently in IE 6/7.
  */
 
 p,
 pre {
     margin: 1em 0;
 }
 
 /**
  * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
  */
 
 code,
 kbd,
 pre,
 samp {
     font-family: monospace, serif;
     _font-family: 'courier new', monospace;
     font-size: 1em;
 }
 
 /**
  * Improve readability of pre-formatted text in all browsers.
  */
 
 pre {
     white-space: pre;
     white-space: pre-wrap;
     word-wrap: break-word;
 }
 
 /**
  * Address CSS quotes not supported in IE 6/7.
  */
 
 q {
     quotes: none;
 }
 
 /**
  * Address `quotes` property not supported in Safari 4.
  */
 
 q:before,
 q:after {
     content: '';
     content: none;
 }
 
 /**
  * Address inconsistent and variable font size in all browsers.
  */
 
 small {
     font-size: 80%;
 }
 
 /**
  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  */
 
 sub,
 sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
 }
 
 sup {
     top: -0.5em;
 }
 
 sub {
     bottom: -0.25em;
 }
 
 /* ==========================================================================
    Lists
    ========================================================================== */
 
 /**
  * Address margins set differently in IE 6/7.
  */
 
 dl,
 menu,
 ol,
 ul {
     margin: 1em 0;
 }
 
 dd {
     margin: 0 0 0 40px;
 }
 
 /**
  * Address paddings set differently in IE 6/7.
  */
 
 menu,
 ol,
 ul {
     padding: 0 0 0 40px;
 }
 
 /**
  * Correct list images handled incorrectly in IE 7.
  */
 
 nav ul,
 nav ol {
     list-style: none;
     list-style-image: none;
 }
 
 /* ==========================================================================
    Embedded content
    ========================================================================== */
 
 /**
  * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
  * 2. Improve image quality when scaled in IE 7.
  */
 
 img {
     border: 0; /* 1 */
     -ms-interpolation-mode: bicubic; /* 2 */
 }
 
 /**
  * Correct overflow displayed oddly in IE 9.
  */
 
 svg:not(:root) {
     overflow: hidden;
 }
 
 /* ==========================================================================
    Figures
    ========================================================================== */
 
 /**
  * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
  */
 
 figure {
     margin: 0;
 }
 
 /* ==========================================================================
    Forms
    ========================================================================== */
 
 /**
  * Correct margin displayed oddly in IE 6/7.
  */
 
 form {
     margin: 0;
 }
 
 /**
  * Define consistent border, margin, and padding.
  */
 
 fieldset {
     border: 1px solid #c0c0c0;
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
 }
 
 /**
  * 1. Correct color not being inherited in IE 6/7/8/9.
  * 2. Correct text not wrapping in Firefox 3.
  * 3. Correct alignment displayed oddly in IE 6/7.
  */
 
 legend {
     border: 0; /* 1 */
     padding: 0;
     white-space: normal; /* 2 */
     *margin-left: -7px; /* 3 */
 }
 
 /**
  * 1. Correct font size not being inherited in all browsers.
  * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
  *    and Chrome.
  * 3. Improve appearance and consistency in all browsers.
  */
 
 button,
 input,
 select,
 textarea {
     font-size: 100%; /* 1 */
     margin: 0; /* 2 */
     vertical-align: baseline; /* 3 */
     *vertical-align: middle; /* 3 */
 }
 
 /**
  * Address Firefox 3+ setting `line-height` on `input` using `!important` in
  * the UA stylesheet.
  */
 
 button,
 input {
     line-height: normal;
 }
 
 /**
  * Address inconsistent `text-transform` inheritance for `button` and `select`.
  * All other form control elements do not inherit `text-transform` values.
  * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
  * Correct `select` style inheritance in Firefox 4+ and Opera.
  */
 
 button,
 select {
     text-transform: none;
 }
 
 /**
  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  *    and `video` controls.
  * 2. Correct inability to style clickable `input` types in iOS.
  * 3. Improve usability and consistency of cursor style between image-type
  *    `input` and others.
  * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
  *    Known issue: inner spacing remains in IE 6.
  */
 
 button,
 html input[type="button"], /* 1 */
 input[type="reset"],
 input[type="submit"] {
     -webkit-appearance: button; /* 2 */
     cursor: pointer; /* 3 */
     *overflow: visible;  /* 4 */
 }
 
 /**
  * Re-set default cursor for disabled elements.
  */
 
 button[disabled],
 html input[disabled] {
     cursor: default;
 }
 
 /**
  * 1. Address box sizing set to content-box in IE 8/9.
  * 2. Remove excess padding in IE 8/9.
  * 3. Remove excess padding in IE 7.
  *    Known issue: excess padding remains in IE 6.
  */
 
 input[type="checkbox"],
 input[type="radio"] {
     box-sizing: border-box; /* 1 */
     padding: 0; /* 2 */
     *height: 13px; /* 3 */
     *width: 13px; /* 3 */
 }
 
 /**
  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
  *    (include `-moz` to future-proof).
  */
 
 input[type="search"] {
     -webkit-appearance: textfield; /* 1 */
     -moz-box-sizing: content-box;
     -webkit-box-sizing: content-box; /* 2 */
     box-sizing: content-box;
 }
 
 /**
  * Remove inner padding and search cancel button in Safari 5 and Chrome
  * on OS X.
  */
 
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
 /**
  * Remove inner padding and border in Firefox 3+.
  */
 
 button::-moz-focus-inner,
 input::-moz-focus-inner {
     border: 0;
     padding: 0;
 }
 
 /**
  * 1. Remove default vertical scrollbar in IE 6/7/8/9.
  * 2. Improve readability and alignment in all browsers.
  */
 
 textarea {
     overflow: auto; /* 1 */
     vertical-align: top; /* 2 */
 }
 
 /* ==========================================================================
    Tables
    ========================================================================== */
 
 /**
  * Remove most spacing between table cells.
  */
 
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 //
 // Typography
 // ----------------------------------------------------------------------------------
 
 $font-family-sans-serif: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "SimSun", \5b8b\4f53, "WenQuanYi Micro Hei", "Helvetica Neue", Arial, Tahoma,  sans-serif !default;
 $font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace !default;
 $font-family: $font-family-sans-serif !default;
 $en-font-family: "Helvetica Neue",  Arial,Tahoma !default;
 
 $header-font-family: "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif !default;
 
 $font-size: 12px !default;
 $line-height: 18px !default;
 
 @mixin font-smoothing($value: antialiased) {
   @if $value == antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   @else {
     -webkit-font-smoothing: subpixel-antialiased;
     -moz-osx-font-smoothing: auto;
   }
 }
 
 *, *:before, *:after {
   @include box-sizing(border-box);
 }
 
 html {
   font-size: 62.5%;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
 body {
   color: $color-text;
   font-size: $font-size;
   line-height: $line-height;
   font-family: $font-family;
   @include font-smoothing();
 }
 
 // font inhreit
 input,
 button,
 select,
 textarea {
   font-family: inherit;
   background-image: none;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: $header-font-family;
 }
 
 ul,
 ol,
 menu {
   padding: 0;
   margin: 0;
   list-style-type: none;
 }
 
 // link
 a {
   @include unstyled-link();
   @include link-colors($color-link, $color-link);
   cursor: pointer;
 }
 
 // code
 //
 code,
 kbd,
 pre,
 samp {
   font-family: $font-family-monospace;
 }
 
 [class^="icon-"],
 [class*=" icon-"] {
   @include inline-block();
 }
 
 .hide {
   display: none;
 }
 
 .clearfix {
   &:before,
   &:after {
     content: "";
     display: table;
   }
   &:after {
     clear: both;
   }
   zoom: 1
 }
 
 .heading {
   > * {
     padding: 5px;
     border: 1px solid $color-border;
     border-top: 0;
   }
 }
 
 .heading-title {
   font-size: 1.2em;
   padding: 10px 12px;
   font-weight: normal;
   margin: 0;
   color: white;
   border: 1px solid $color-primary;
   background-color: $color-primary;
 }
 
 .currency {
   font-size: 1.1em;
   font-family: Tahoma, Verdana, Arial, sans-serif;
   color: $color-currency;
   font-weight: bold;
 }
 
 
 .left-text {
   text-align: left;
 }
 
 .right-text {
   text-align: right;
 }
 
 .pull-left {
   float: left !important;
 }
 
 .pull-right {
   float: right !important;
 }
 
 button,
 input,
 select,
 textarea {
   vertical-align: middle; /* 3 */
 }
 
 .block {
   display: block;
   min-height: 50px;
   color: $color-text;
   border: 1px solid $color-border;
   background-color: #fff;
   padding: 5px 10px;
 }
 
 .block-primary {
   color: $color-primary;
   border: 1px solid transparent;
   background-color: $color-background;
 }
 
 $span1-width: 140px !default;
 $span2-width: 195px !default;
 $span3-width: 260px !default;
 $span-padding: 0 !default;
 
 .span1 {
   padding: $span-padding;
   @include inline-block();
   width: $span1-width;
 }
 
 .span2 {
   padding: $span-padding;
   @include inline-block();
   width: $span2-width;
   text-align: right;
 }
 
 .span3 {
   padding: $span-padding;
   @include inline-block();
   width: $span3-width;
   text-align: right;
 }
 //
 // Accordion
 // ----------------------------------------------------------------------------------
 
 .accordion {
   .accordion-heading {
     height: 32px;
     line-height: 32px;
     border-width: 0;
     font-size: 12px;
     font-weight: normal;
     margin: 5px 0 0 0;
     background-color: #666;
 
     span {
       float: left;
       height: 32px;
       cursor: pointer;
       width: 15%;
       text-align: center;
       @include inline-block(middle);
 
       i {
         vertical-align: top;
         color: #000;
       }
     }
 
     a {
       width: 85%;
       display: block;
       color: white;
       float: left;
     }
   }
 
   .accordion-content {
     .accordion-heading {
       background-color: #ebecf0;
 
       a {
         width: 78%;
         padding-left: 22%;
         color: #24344e;
       }
     }
   }
 }
 //
 // Alerts
 // ----------------------------------------------------------------------------------
 
 @mixin alert-arrow {
   content: "";
   position: absolute;
   display: block;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 6px;
 }
 
 @mixin tip-color ($color) {
   color: $color;
   border-color: $color;
   background-color: #fff;
   &.up {
     &:before {
       border-color: transparent transparent $color transparent;
     }
   }
 
   &.left {
     &:before {
       border-color: transparent $color transparent transparent;
     }
   }
 
   &.down {
     &:before {
       border-color: $color transparent transparent transparent;
     }
   }
 }
 
 @mixin alert-color ($color) {
   border: 1px solid rgba($color, 0.65);
   background-color: rgba($color, 0.09);
 
   .common-alert-icon {
     color: $color;
   }
 }
 
 .alert {
   position: relative;
   display: block;
   overflow: hidden;
   border: 2px solid #ccd0d6;
   background-color: #ebecf0;
   padding: 20px;
   line-height: 20px;
   border-radius: $border-radius-normal;
 
   .js-close-icon {
     position: absolute;
     color: rgba(0, 0, 0, 0.45);
     font-size: 12px;
     right: 16px;
     top: 11px;
     cursor: pointer;
   }
 
   .common-alert-icon {
     position: absolute;
     font-size: 14px;
     top: 10px;
     left: 16px;
   }
 
   .alert-message {
     font-size: 14px;
     color: rgba(0, 0, 0, 0.65);
     line-height: 22px;
     margin: 0;
   }
 
   .subject-alert-title {
     font-size: 16px;
     color: rgba(0,0,0,0.85);
     line-height: 24px;
     font-weight: bold;
     margin: 0 0 4px;
   }
 
   &.basic-alert {
     padding: 8px 16px;
   }
 
   &.basic-alert-with-icon {
     padding: 8px 38px;
   }
 
   &.alert-with-link {
     padding: 8px 88px 8px 38px;
 
     .alert-link {
       position: absolute;
       top: 8px;
       right: 16px;
       font-size: 14px;
       color: $color-info;
       line-height: 22px;
     }
   }
 
   &.subject-alert {
     padding: 15px 24px;
   }
 
   &.subject-alert-with-icon {
     padding: 15px 36px 15px 68px;
 
     .common-alert-icon {
       font-size: 24px;
       top: 18px;
       left: 24px;
     }
   }
 }
 
//  .alert-success {
//    @include alert-color($color-success);
//  }
 
 .alert-warning {
   @include alert-color($color-warning);
 }
 
 .alert-error {
   @include alert-color($color-danger);
 }
 
 .alert-info {
   @include alert-color($color-info);
 }
 
 //
 // Button Mixins
 // ---------------------------------------------------------------------
 
 $btn-large-font-size: 16px !default;
 $btn-large-padding: 11px 14px !default;
 
 $btn-font-size: 14px !default;
 $btn-padding: 8px 16px !default;
 
 $btn-medium-font-size: 14px !default;
 $btn-medium-padding: 6px 14px !default;
 
 $btn-small-font-size: 14px !default;
 $btn-small-padding: 4px 12px !default;
 
 $btn-border-radius: $border-radius-normal !default;
 
 @mixin btn-size($padding, $font-size) {
   padding: $padding;
   font-size: $font-size;
   line-height: $font-size;
 }
 
 @mixin btn-font-family($font-family) {
   font-family: $font-family;
 }
 
 @mixin btn-variant($color, $background, $border, $color-hover, $background-hover, $border-hover, $disabled-background-color, $disabled-border-color, $disabled-color) {
   color: $color;
   border-color: $border;
   background-color: $background;
 
   &:hover,
   &:focus,
   &:active,
   &.active {
     color: $color-hover;
     background-color: $background-hover;
     border-color: $border-hover;
     text-decoration: none;
     outline: 0;
   }
 
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
     &,
     &:hover,
     &:focus,
     &:active,
     &.active {
       cursor: not-allowed;
       background-color: $disabled-background-color;
       border-color: $disabled-border-color;
       color: $disabled-color;
     }
   }
 }
 
 @mixin btn-loading-size($size) {
   &::before {
     width: $size;
     height: $size;
   }
 }
 
 @keyframes loading {
   100% {
     transform: rotate(360deg);
   }
 }
 
 @-webkit-keyframes loading {
   100% {
     transform: rotate(360deg);
   }
 }
 
 @-moz-keyframes loading {
   100% {
     transform: rotate(360deg);
   }
 }
 
 //
 // Buttons
 // ----------------------------------------------------------------------------------
 
 .btn {
   @include inline-block(baseline);
   margin-bottom: 0;
   font-weight: normal;
   text-align: center;
   cursor: pointer;
   border: 1px solid transparent;
   border-radius: $btn-border-radius;
   white-space: nowrap;
   line-height: 18px;
   @include user-select(none);
   @extend .btn-primary;
 }
 
 .btn {
   @include btn-size($btn-padding, $btn-font-size);
 
   &.loading {
     position: relative;
     pointer-events: none;
 
     &::before {
       content: "";
       display: inline-block;
       width: 12px;
       height: 12px;
       margin-right: 6px;
       border: 1px solid;
       border-radius: 50%;
       border-color: transparent;
       border-top-color: $white;
       animation: loading 1s linear infinite;
       -webkit-animation: loading 1s linear infinite;
       -moz-animation: loading 1s linear infinite;
     }
 
     &::after {
       content: "";
       position: absolute;
       top: -1px;
       left: -1px;
       right: -1px;
       bottom: -1px;
       background-color: $white;
       opacity: 0.35;
       border-radius: inherit;
       z-index: 1;
       pointer-events: none;
     }
 
     &.loading-color {
       &::before {
         border-top-color: $color-primary;
       }
     }
 
     &.loading-large {
       @include btn-loading-size(14px);
     }
 
     &.loading-medium {
       @include btn-loading-size(12px);
     }
 
     &.loading-small {
       @include btn-loading-size(10px);
     }
   }
 }
 
 .btn-primary {
   @include btn-variant($btn-primary-color, $btn-primary-background-color, $btn-primary-border, $btn-primary-hover-color, $btn-primary-hover-background-color, $btn-primary-hover-border, $btn-primary-disable-background-color, $btn-primary-disable-border, $btn-primary-disable-color);
 }
 
 .btn-secondary {
   @include btn-variant($btn-secondary-color, $btn-secondary-background-color, $btn-secondary-border, $btn-secondary-hover-color, $btn-secondary-hover-background-color, $btn-secondary-hover-border, $btn-secondary-disable-background-color, $btn-secondary-disable-border, $btn-secondary-disable-color);
 }
 
 .btn-info {
   @include btn-variant($btn-info-color, $btn-info-background-color, $btn-info-border, $btn-info-hover-color, $btn-info-hover-background-color, $btn-info-hover-border, $btn-info-disable-background-color, $btn-info-disable-border, $btn-info-disable-color);
 }
 
 .btn-ghost {
   @include btn-variant($btn-ghost-color, $btn-ghost-background-color, $btn-ghost-border, $btn-ghost-hover-color, $btn-ghost-hover-background-color, $btn-ghost-hover-border, $btn-ghost-disable-background-color, $btn-ghost-disable-border, $btn-ghost-disable-color);
 }
 
 .btn-warning {
   @include btn-variant($btn-secondary-color, $btn-secondary-background-color, $btn-secondary-border, $btn-warning-hover-color, $btn-warning-hover-background-color, $btn-warning-hover-border, $btn-secondary-disable-background-color, $btn-secondary-disable-border, $btn-secondary-disable-color);
 }
 
 .btn-danger {
   @include btn-variant($btn-danger-hover-background-color, $btn-secondary-background-color, $btn-secondary-border, $btn-danger-hover-color, $btn-danger-hover-background-color, $btn-danger-hover-border, $btn-secondary-disable-background-color, $btn-secondary-disable-border, $btn-secondary-disable-color);
 }
 
 .btn-block {
   display: block;
   width: 100%;
 }
 
 .btn-large {
   @include btn-size($btn-large-padding, $btn-large-font-size);
 }
 
 .btn-medium {
   @include btn-size($btn-medium-padding, $btn-medium-font-size);
 }
 
 .btn-small {
   @include btn-size($btn-small-padding, $btn-small-font-size);
 }
 
 .btn-group,
 .btn-toolbar {
   @include inline-block(baseline);
   font-size: 0;
 
   .btn {
     position: relative;
     border-radius: 0;
 
     &.active {
       @extend .btn-primary;
       z-index: 9;
     }
 
   }
 }
 
 .btn-group {
   .btn {
     border-radius: $border-radius-normal;
   }
 }
 
 .btn-toolbar {
   .btn {
     &:first-child {
       border-radius: $border-radius-normal 0 0 $border-radius-normal;
     }
 
     &:last-child {
       border-radius: 0 $border-radius-normal $border-radius-normal 0;
     }
   }
 }
 
 .btn-group {
   .btn:not(:first-child) {
     margin-left: 10px;
   }
 }
 
 .btn-upload {
   position: relative;
   overflow: hidden;
   @include inline-block(top);
   background-color: white;
   color: $btn-upload-color;
   border: 1px solid $color-border;
 
 
   &:hover, &.active {
     color: $color-primary;
     background-color: white;
     border: 1px solid $color-primary;
     cursor: pointer;
   }
 
   span {
     @include inline-block(baseline);
     height: $font-size;
     i {
       margin-right: 10px;
       font-size: 16px;
       line-height: $font-size;
     }
   }
 
   input {
     top: 0;
     right: 0;
     margin: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
     position: absolute;
     @include opacity(0);
   }
 }
 //
 // Cards
 // ----------------------------------------------------------------------------------
 
 .card {
   hr {
     border: none;
     margin: 2px 0;
     border-top: 1px solid $color-border;
   }
 
   dl {
     margin: 0;
     width: 100%;
     line-height: 32px;
 
     dt,
     dd {
       @include inline-block(middle);
 
       &.card-text {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         width: 62.5%;
         height: 32px;
       }
 
       a:hover {
         color: $color-border;
       }
     }
 
     dt {
       width: 37.5%;
       text-align: right;
     }
 
     dd {
       margin: 0;
 
       span {
         color: $color-text;
       }
     }
   }
 }
 
 .badge {
   color: $white !important;
   padding: 2px;
   margin: 0 5px;
   font-size: 12px;
   border-radius: $border-radius-small;
   background-color: $color-primary;
 }
 
 .badge-primary {
   color: $white !important;
   background-color: $color-primary;
 }
 //
 // Carousels
 // ----------------------------------------------------------------------------------
 
 $carousel-indicator-size: 12px !default;
 $carousel-rounded-indicator-size: 25px !default;
 $carousel-squared-indicator-size: 25px !default;
 $carousel-indicator-color: $color-primary !default;
 
 .carousel {
   position: relative;
   overflow: hidden;
 
   .carousel-contents {
     .carousel-content {
       position: absolute;
       left: 0;
       top: 0;
       height: 100%;
       width: 100%;
     }
   }
 
   .carousel-navs {
     z-index: 1;
     position: relative;
     height: 100%;
     cursor: pointer;
   }
 
   .carousel-control {
     position: absolute;
     top: 50%;
     left: 0;
     bottom: 0;
     height: 40px;
     margin-top: -20px;
     text-align: center;
     z-index: 9;
 
     &.left {
       left: 20px;
     }
 
     &.right {
       left: auto;
       right: 20px;
     }
   }
 
   .carousel-indicators {
     position: absolute;
     z-index: 9;
     left: 50%;
     bottom: 5px;
     width: 60%;
     margin-left: -30%;
     padding-left: 0;
     list-style: none;
     text-align: center;
 
     li {
       @include inline-block(baseline);
       margin-right: 6px;
       width: $carousel-indicator-size;
       height: $carousel-indicator-size;
       text-indent: -9999px;
       background-color: #666;
       border-radius: $carousel-indicator-size / 2;
       cursor: pointer;
 
       &.active {
         background-color: $carousel-indicator-color;
       }
     }
   }
 }
 
 .carousel-rounded {
   .carousel-indicators {
     li {
       width: $carousel-rounded-indicator-size;
       height: $carousel-rounded-indicator-size;
       text-indent: inherit;
       color: white;
       border-radius: $carousel-rounded-indicator-size / 2;
 
       span {
         line-height: $carousel-rounded-indicator-size;
       }
     }
   }
 }
 
 .carousel-squared {
   .carousel-indicators {
     li {
       width: $carousel-squared-indicator-size;
       height: $carousel-squared-indicator-size;
       text-indent: inherit;
       color: white;
       border-radius: 0;
 
       span {
         line-height: $carousel-squared-indicator-size;
       }
     }
   }
 }
 
 .carousel-rounded-rt {
   .carousel-indicators {
     margin: 10px;
     width: auto;
     height: 12px;
     left: auto;
     right: 0;
     top: 0;
 
     li {
       width: 6px;
       height: 6px;
       border-radius: 3px;
       margin-right: 2px;
     }
   }
 }
 
 .carousel-squared-lb {
   .carousel-indicators {
     margin: 10px;
     width: auto;
     height: 6px;
     left: 0;
     bottom: 0;
 
     li {
       margin-right: 2px;
       border-radius: 0;
       height: 6px;
       width: 20px;
     }
   }
 }
 
 .carousel-super {
   // position: static;
   margin-left: auto;
   margin-right: auto;
 
   .carousel-contents {
     .carousel-content {
       a {
         display: block;
         height: 100%;
         width: 100%;
       }
     }
   }
 }
 .component-cascader-container {
   position: absolute;
   z-index: 999;
   background-color: #fff;
   border-radius: 6px;
   border: 1px solid $color-border;
   white-space: nowrap;
   font-size: 0;
 
   .category-container {
     background-color: transparent;
     width: 180px;
     height: 280px;
     overflow-y: auto;
     border-left: 1px solid $color-border;
     font-size: 12px;
     @include inline-block(top);
 
     &:first-child {
       border-left: 0;
     }
   }
 
   .category-item {
     padding: 7px 10px;
 
     &:first-child {
       margin-top: 0;
     }
 
     &:hover {
       background-color: $color-background;
     }
 
     &.selected {
       background-color: $color-primary-light;
       color: #fff;
     }
   }
 }
 //
 // Checkbox
 // ----------------------------------------------------------------------------------
 
 $checkbox-width: 16px !default;
 $checkbox-height: $checkbox-width !default;
 $checkbox-background-color: #fff !default;
 $checkbox-border-radius: $border-radius-small !default;
 $checkbox-border-color: $color-border !default;
 $checkbox-hover-border-color: $color-primary !default;
 $checkbox-disable-background-color: $color-background !default;
 $checkbox-spacing: 8px !default;
 
 input[type=checkbox].input-checkbox {
   @include inline-block(baseline);
   height: $checkbox-height;
   width: $checkbox-width;
   border-radius: $checkbox-border-radius;
   margin-right: $checkbox-spacing;
   background-color:$checkbox-background-color;
   position: relative;
   @include appearance(none);
 
   &:before {
     content: "";
     position: absolute;
     height: $checkbox-height;
     width: $checkbox-width;
     border: 1px solid $checkbox-border-color;
     border-radius: $checkbox-border-radius;
   }
 
   &:after {
     content: "";
     position: absolute;
     height: $checkbox-height;
     width: $checkbox-width;
     font-size: 16px;
     border: 1px solid $checkbox-border-color;
     border-radius: $checkbox-border-radius;
     line-height: 1;
     font-family: "icon-pokeball" !important;
     -webkit-font-smoothing: antialiased;
     -webkit-text-stroke-width: 0.2px;
   }
 
   &:focus {
     outline: none;
   }
 
   &:hover,
   &[indeterminate="true"],
   &:checked,
   &[checked="checked"] {
 
     &:after,&:before {
       border: 1px solid $checkbox-hover-border-color;
     }
   }
 
   &[indeterminate="true"],
   &:checked,
   &[checked="checked"] {
 
     &:before {
       background-color: #fff;
       display: block;
     }
 
     &:after {
       width: $checkbox-width;
       height: $checkbox-height;
       color: $checkbox-hover-border-color;
       border-width: 0;
       background-color: transparent;
     }
   }
 
   &[indeterminate="true"] {
 
     &:after {
       content: "\e603";
     }
   }
 
   &:checked,
   &[checked="checked"] {
 
     &:after {
       content: "\e602";
     }
   }
 
   &.disabled,
   &[readonly],
   &[disabled],
   fieldset[disabled] & {
     pointer-events: none;
     cursor: not-allowed;
 
     &:after {
       background-color: transparent;
       border-width: 0;
       color: $checkbox-disable-background-color !important;
     }
 
     &:before {
       background-color: $checkbox-disable-background-color;
       border: 1px solid $checkbox-border-color;
     }
 
     &:checked {
       &:before {
         background-color: $checkbox-border-color;
       }
     }
 
     &[indeterminate="true"] {
       &:before {
         background-color: $checkbox-border-color;
       }
     }
   }
 }
 //
 // Datepicker
 // ----------------------------------------------------------------------------------
 
 .datepicker {
   &[readonly] {
     background-color: #fff !important;
   }
 }
 
 .pika-single {
     z-index: 9999;
     display: block;
     position: relative;
     color: $pika-calendar-color;
     background: $pika-calendar-bg-color;
 
     &.is-hidden {
         display: none;
     }
 
     &.is-bound {
         position: absolute;
     }
 }
 
 // clear child float (pika-lendar), using the famous micro clearfix hack
 // http://nicolasgallagher.com/micro-clearfix-hack/
 .pika-single {
     *zoom: 1;
 
     &:before,
     &:after {
         content: " ";
         display: table;
     }
 
     &:after { clear: both }
 }
 
 .pika-lendar {
     float: left;
     width: 278px;
     height: 282px;
     border: 1px solid $pika-calendar-border-color;
 }
 
 .pika-title {
     position: relative;
     text-align: center;
     height: 30px;
     border-bottom: 1px solid $pika-calendar-border-color;
 
     select {
         cursor: pointer;
         position: absolute;
         z-index: 9998;
         margin: 0;
         left: 0;
         top: 5px;
         filter: alpha(opacity=0);
         opacity: 0;
         height: auto;
     }
 }
 
 .pika-label {
     display: inline-block;
     *display: inline;
     position: relative;
     z-index: 9999;
     overflow: hidden;
     margin: 0;
     padding: 5px 3px;
     font-size: 12px;
     line-height: 18px;
     font-weight: bold;
     background-color: $pika-calendar-bg-color;
 }
 
 .pika-prev,
 .pika-next {
     display: block;
     cursor: pointer;
     position: relative;
     outline: none;
     border: 0;
     padding: 0;
     width: 20px;
     height: 30px;
     text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
     white-space: nowrap;
     overflow: hidden;
     background-color: transparent;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: 75% 75%;
     opacity: .5;
     *position: absolute;
     *top: 0;
 
     &:hover {
         opacity: 1;
     }
 
     &.is-disabled {
         cursor: default;
         opacity: .2;
     }
 }
 
 .pika-prev,
 .is-rtl .pika-next {
     float: left;
     background-image: url('');
     *left: 0;
 }
 
 .pika-next,
 .is-rtl .pika-prev {
     float: right;
     background-image: url('');
     *right: 0;
 }
 
 .pika-select {
     display: inline-block;
     *display: inline;
 }
 
 .pika-calendar {
   padding: 6px 16px;
 }
 
 .pika-table {
     width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
     border: 0;
 
     th,
     td {
         width: 14.285714285714286%;
         padding: 0;
         height: 34px;
     }
 
     th {
         color: $pika-calendar-color;
         font-size: 12px;
         line-height: 18px;
         font-weight: bold;
         text-align: center;
     }
 
     abbr {
         border-bottom: none;
         cursor: help;
     }
 }
 
 .pika-button {
     position: relative;
     cursor: default;
     display: block;
     text-align: center;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     outline: none;
     margin: auto;
     padding: 0;
     border: 0;
     width: 100%;
     color: $pika-calendar-color;
     background-color: transparent;
     font-size: 12px;
     line-height: 18px;
     text-align: center;
 
     &:after {
       content: '';
       display: none;
       background-color: $pika-calendar-secondary-color;
       position: absolute;
       width: 20px;
       height: 20px;
       top: 0;
       z-index: -1;
     }
 
     &:hover .pika-day{
         color: $pika-calendar-inverse-color;
         background: $pika-calendar-primary-color;
         box-shadow: none;
     }
 
     .pika-day {
       cursor: pointer;
       position: relative;
       @include inline-block();
       width: 20px;
       height: 20px;
       line-height: 20px;
       border-radius: 20px;
 
       .is-today & {
           color: $pika-calendar-primary-color;
           font-weight: bold;
       }
 
       .is-selected & {
           color: $pika-calendar-bg-color;
           font-weight: bold;
           background: $pika-calendar-primary-color;
           border-radius: 20px;
       }
 
       .is-disabled &,
       .is-outside-current-month & {
           pointer-events: none;
           cursor: default;
           color: $pika-calendar-invalid-color;
           opacity: .3;
       }
 
       &:hover {
         color: white;
       }
     }
 }
 
 .pika-week {
     font-size: 11px;
     color: $pika-calendar-invalid-color;
 }
 
 .is-inrange .pika-button {
     background: $pika-calendar-secondary-color;
 }
 
 .is-startrange .pika-button {
   &:after {
     display: block;
     right: 0;
   }
 }
 
 .is-endrange .pika-button {
   &:after {
     display: block;
     left: 0;
   }
 }
 
 .is-startrange .pika-day {
     color: $pika-calendar-inverse-color;
     background: $pika-calendar-primary-color;
     box-shadow: none;
 }
 
 .is-endrange .pika-day {
     color: $pika-calendar-inverse-color;
     background: $pika-calendar-primary-color;
     box-shadow: none;
 }
 //
 // Dropdown
 // ----------------------------------------------------------------------------------
 
 $dropdown-caret-size: 5px !default;
 
 .caret {
   @include inline-block(top);
   width: 0;
   height: 0;
   border-top: $dropdown-caret-size solid #000;
   border-right: $dropdown-caret-size solid transparent;
   border-left: $dropdown-caret-size solid transparent;
   content: "";
 }
 
 .dropdown {
   @include inline-block();
   position: relative;
 
   .dropdown-selector {
     @include inline-block();
     position: relative;
     cursor: pointer;
 
     input[readonly] {
       background-color: white;
       cursor: pointer;
       padding-right: 20px;
       &[disabled] {
         cursor: not-allowed;
         background-color: $color-background;
       }
     }
 
     .caret {
       position: absolute;
       right: 10px;
       top: 15px;
       border-top-color: $color-border;
     }
   }
 
   .dropdown-content {
     position: absolute;
     display: none;
     background-color: white;
     width: 100%;
     z-index: 1;
 
     @if $border-radius-normal != 0 {
       top: 36px;
       border-radius: $border-radius-normal;
       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18)
     }
   }
 
   .dropdown-menu {
     padding: 0;
     margin: 0;
     @if $border-radius-normal == 0 {
       border-left: 1px solid $color-border;
       border-right: 1px solid $color-border;
     }
     border-top: 0;
     max-height: 260px;
     overflow: auto;
 
     li {
       line-height: 30px;
       padding: 0 10px;
       cursor: pointer;
       list-style: none;
       word-wrap: break-word;
 
       &.active {
         background: rgba($color-primary, 0.05);
       }
       &:before, &:after {
         content: "";
         display: table;
       }
       &:after {
         clear: both;
       }
       &:hover {
         background: rgba($color-primary, 0.05);
 
         i {
           visibility: visible;
         }
       }
 
       &:last-child {
         border-bottom: 1px solid $color-border;
       }
 
       i {
         float: right;
         visibility: hidden;
         color: $color-text;
       }
     }
   }
 
   .dropdown-append {
     input {
       width: 100px;
       padding: 8px 10px;
       border-radius: 0;
       border-bottom-left-radius: $border-radius-normal;
       @if $border-radius-normal == 0 {
         height: 31px;
         border: 1px solid $color-border;
         border-top: none;
       } @else {
         border: none;
         border-right: 1px solid $color-border;
       }
     }
 
     button {
       border-radius: 0 !important;
       border-bottom-right-radius: $border-radius-normal !important;
 
       @if $border-radius-normal == 0 {
         height: 31px;
         border: 1px solid $color-border;
         border-top: none;
         border-left: none;
       } @else {
         height: 32px;
         border: none;
       }
     }
   }
 }
 //
 // Flow
 // ----------------------------------------------------------------------------------
 .flow-container {
   margin: 0 auto;
   width: 100%;
   * {
     box-sizing: border-box;
   }
   .row {
     &:before,
     &:after {
       content: "";
       display: table;
       clear: both;
     }
     [class *="col-"] {
       float: left;
     }
     &.gutter {
       margin: 0 -1%;
       >[class *="col-"] {
         padding: 0 1%;
       }
     }
     .col-1-1 {
       width: 100%
     }
     .col-2-1 {
       width: 50%;
     }
     .col-3-1 {
       width: 33.33%;
     }
     .col-3-2 {
       width: 66.67%;
     }
     .col-4-1 {
       width: 25%;
     }
     .col-4-2 {
       width: 50%;
     }
     .col-4-3 {
       width: 75%;
     }
   }
 }//
 // Forms
 // ----------------------------------------------------------------------------------
 
 $input-height: 32px !default;
 $input-width: 160px !default;
 $input-line-height: 18px !default;
 $input-padding: 7px 10px !default;
 
 $form-aligned-label-width: 8em !default;
 $form-aligned-label-right: 15px !default;
 $form-aligned-controls-left: 138px !default;
 
 $input-large-width: 462px !default;
 $input-medium-width: 232px !default;
 $input-small-width: 71.5px !default;
 
 $input-block-small-width: 90px !default;
 
 @mixin note($color) {
   color: $color;
   @include inline-block(baseline);
   margin-left: 4px;
 }
 
 select,
 textarea,
 input.control,
 [contenteditable=true],
 input[type="text"],
 input[type="password"],
 input[type="email"],
 input[type="url"],
 input[type="date"],
 input[type="month"],
 input[type="time"],
 input[type="datetime"],
 input[type="datetime-local"],
 input[type="week"],
 input[type="number"],
 input[type="search"],
 input[type="tel"],
 input[type="color"] {
   width: $input-width;
   padding: $input-padding;
   height: $input-height;
   line-height: $input-line-height;
   border: 1px solid $input-border-color;
   border-radius: $input-border-radius;
   font-family: $input-font-family;
   color: $input-text-color;
   font-size: 12px;
   @include input-placeholder {
     color: $input-placeholder-color;
   }
 
   &:hover {
     border-color: $input-hover-color;
   }
   &:focus {
     outline: 0;
     border-color: $input-focus-color;
   }
 
   &[readonly] {
     background-color: $color-background;
     color: $color-text;
     border-color: $color-border;
   }
 
   &[disabled] {
     cursor: not-allowed;
     background-color: $color-background;
     color: $color-text;
   }
 
   &.error {
     outline: 0;
     border-color: $input-danger-color;
   }
 }
 
 select {
   padding: 4px 5px;
   width: 188px;
 }
 
 textarea {
   width: 267px;
   height: auto;
   margin-bottom: 4px;
 }
 
 input[type=number] {
   -moz-appearance:textfield;
 }
 
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
 input[type="file"]:focus{
   outline: thin dotted $color-border;
 }
 
 select {
   height: 28px;
   @include appearance(menulist);
 }
 
 select[multiple] {
   height: auto;
 }
 
 .input-small {
   width: $input-small-width !important;
 }
 
 .input-medium {
   width: $input-medium-width !important;
 }
 
 .input-large {
   width: $input-large-width !important;
 }
 
 label {
   @include inline-block(baseline);
   margin-right: 2px;
   color: $label-text-color;
 }
 
 legend {
   display: block;
   width: 100%;
   margin-bottom: 0.3em;
   font-size: 125%;
   color: $color-text;
 }
 
 fieldset {
   margin: 0;
   padding: 5px 0;
   border: 0;
 }
 
 .form-aligned {
 
   .form-control {
     width: 100%;
     display: block;
   }
 
   .control-group {
     margin-bottom: 16px;
 
     label {
       text-align: right;
       @include inline-block(baseline);
       width: $form-aligned-label-width;
       margin-right: $form-aligned-label-right;
     }
 
     .note {
       @include note($color-text-assist);
     }
 
     .note-error,
     .note-error-empty {
       @include note($color-danger);
       display: none;
     }
 
     .note-success {
       @include note($color-success);
       display: none;
     }
 
     .note-icon {
       margin-left: -27px;
       line-height: 16px;
       padding-right: 7px;
     }
 
     &.success,
     .success {
 
       .note {
         display: none;
       }
 
       .note-success {
         @include inline-block(baseline);
       }
 
       input.control,
       input[type="text"],
       input[type="password"],
       input[type="email"],
       input[type="url"],
       input[type="date"],
       input[type="month"],
       input[type="time"],
       input[type="datetime"],
       input[type="datetime-local"],
       input[type="week"],
       input[type="number"],
       input[type="search"],
       input[type="tel"],
       input[type="color"],
       select,
       textarea {
         outline: 0;
         border-color: $color-success;
       }
     }
 
     &.error,
     .error {
 
       .note, .note-error-empty {
         display: none;
       }
 
       .note-error {
         @include inline-block(baseline);
       }
 
       input.control,
       input[type="text"],
       input[type="password"],
       input[type="email"],
       input[type="url"],
       input[type="date"],
       input[type="month"],
       input[type="time"],
       input[type="datetime"],
       input[type="datetime-local"],
       input[type="week"],
       input[type="number"],
       input[type="search"],
       input[type="tel"],
       input[type="color"],
       select,
       textarea {
         outline: 0;
         border-color: $color-danger;
         color: $color-danger;
       }
     }
 
     &.error.empty, .error.empty {
       .note, .note-error {
         display: none;
       }
       .note-error-empty {
         @include inline-block(baseline);
       }
     }
   }
 
   .controls {
     margin-bottom: 16px;
     margin-left: $form-aligned-controls-left;
   }
 }
 
 .form .spacing {
   @include inline-block(middle);
   width: 10px;
   font-size: 12px;
   text-align: center;
 }
 
 .form {
   label {
     vertical-align: middle;
   }
 
   .input-pair {
     @include inline-block();
     border: 1px solid $input-border-color;
     font-size: 0;
 
     input {
       border: 0;
     }
 
     .spacing {
       width: 8px;
       color: $input-placeholder-color;
     }
   }
 }
 
 .required {
   @include inline-block(top);
   margin: 0 2px;
   color: $color-danger !important;
 }
 
 .block {
   .form {
     input.control,
     input[type="text"],
     input[type="password"],
     input[type="email"],
     input[type="url"],
     input[type="date"],
     input[type="month"],
     input[type="time"],
     input[type="datetime"],
     input[type="datetime-local"],
     input[type="week"],
     input[type="number"],
     input[type="search"],
     input[type="tel"],
     input[type="color"],
     select {
       width: 190px;
 
       &.input-small {
         width: $input-block-small-width !important;
       }
     }
   }
 }
 //
 // Grids
 // ----------------------------------------------------------------------------------
 $grid-padding: 10px !default;
 $grid-font-size: 12px !default;
 .grid-container {
   margin: 0 auto;
   padding: 0;
   /*
     define content:
     --row
     --column
   */
   .row {
     font-size: 0;
     &:before,
     &:after {
       content: "";
       display: table;
       clear: both;
     }
     >[class *="col-"] {
       float: left;
       font-size: $grid-font-size;
     }
   }
 }
 
 
 /* child element size with border-box */
 
 .grid-container * {
   box-sizing: border-box;
 }
 
 
 /* start media query */
 
 
 /* screen width less than 480px */
 
 @media all and (max-width: 480px) {
   .grid-container {
     max-width: 460px;
     .row {
       >.col-1 {
         width: 25%;
       }
       >.col-2 {
         width: 50%;
       }
       >.col-3 {
         width: 75%;
       }
       >.col-4,
       >.col-5,
       >.col-6,
       >.col-7,
       >.col-8,
       >.col-9,
       >.col-10,
       >.col-11,
       >.col-12 {
         width: 100%;
       }
       >.col-offset-1 {
         margin-left: 25%;
       }
       >.col-offset-2 {
         margin-left: 50%;
       }
       >.col-offset-3 {
         margin-left: 75%;
       }
       >.col-offset-4,
       >.col-offset-5,
       >.col-offset-6,
       >.col-offset-7,
       >.col-offset-8,
       >.col-offset-9,
       >.col-offset-10,
       >.col-offset-11,
       >.col-offset-12 {
         margin-left: 100%;
       }
     }
   }
 }
 
 
 /* screen width more than 480px less than 840px */
 
 @media all and (max-width: 840px) and (min-width: 481px) {
   .grid-container {
     max-width: 720px;
     .row {
       >.col-1 {
         width: 12.5%;
       }
       >.col-2 {
         width: 25%;
       }
       >.col-3 {
         width: 37.5%;
       }
       >.col-4 {
         width: 50%;
       }
       >.col-5 {
         width: 62.5%;
       }
       >.col-6 {
         width: 75%;
       }
       >.col-7 {
         width: 87.5%;
       }
       >.col-8,
       >.col-9,
       >.col-10,
       >.col-11,
       >.col-12 {
         width: 100%;
       }
       >.col-offset-1 {
         margin-left: 12.5%;
       }
       >.col-offset-2 {
         margin-left: 25%;
       }
       >.col-offset-3 {
         margin-left: 37.5%;
       }
       >.col-offset-4 {
         margin-left: 50%;
       }
       >.col-offset-5 {
         margin-left: 62.5%;
       }
       >.col-offset-6 {
         margin-left: 75%;
       }
       >.col-offset-7 {
         margin-left: 87.5%;
       }
       >.col-offset-8,
       >.col-offset-9,
       >.col-offset-10,
       >.col-offset-11,
       >.col-offset-12 {
         margin-left: 100%;
       }
     }
   }
 }
 
 @media all and (max-width:840px) {
   .grid-container {
     .row.gutter {
       margin: 0 -4px;
       >[class *="col-"] {
         padding: 0 4px;
       }
     }
   }
 }
 
 @media all and (min-width:841px) {
   .grid-container {
     .row {
       >.col-1 {
         width: 8.33%;
       }
       >.col-2 {
         width: 16.66%;
       }
       >.col-3 {
         width: 25%;
       }
       >.col-4 {
         width: 33.33%;
       }
       >.col-5 {
         width: 41.66%;
       }
       >.col-6 {
         width: 50%;
       }
       >.col-7 {
         width: 58.33%;
       }
       >.col-8 {
         width: 66.66%;
       }
       >.col-9 {
         width: 75%;
       }
       >.col-10 {
         width: 83.33%;
       }
       >.col-11 {
         width: 91.66%;
       }
       >.col-12 {
         width: 100%;
       }
       >.col-offset-1 {
         margin-left: 8.33%;
       }
       >.col-offset-2 {
         margin-left: 16.66%;
       }
       >.col-offset-3 {
         margin-left: 25%;
       }
       >.col-offset-4 {
         margin-left: 33.33%;
       }
       >.col-offset-5 {
         margin-left: 41.66%;
       }
       >.col-offset-6 {
         margin-left: 50%;
       }
       >.col-offset-7 {
         margin-left: 58.33%;
       }
       >.col-offset-8 {
         margin-left: 66.66%;
       }
       >.col-offset-9 {
         margin-left: 75%;
       }
       >.col-offset-10 {
         margin-left: 83.33%;
       }
       >.col-offset-11 {
         margin-left: 91.66%;
       }
       >.col-offset-12 {
         margin-left: 100%;
       }
     }
     .row.gutter {
       margin: 0 -8px;
       >[class *="col-"] {
         padding: 0 8px;
       }
     }
   }
 }
 
 
 /* screen width more than 840px less than 1280px */
 
 @media all and (max-width: 1480px) and (min-width: 841px) {
   .grid-container {
     max-width: 960px;
   }
 }
 
 
 /* screen width more than 1280px */
 
 @media all and (min-width: 1481px) {
   .grid-container {
     max-width: 1200px;
   }
 }
 .guide {
   width: 160px;
   color: #197aff;
   border: 1px solid #ccd0d6;
   padding-left: 0;
   position: relative;
 }
 .guide li {
   list-style: none;
 }
 .guide li [data-guide-pop] {
   display: none;
   position: absolute;
   width: 300px;
   top: -1px;
   left:158px;
   bottom: -1px;
   border: 1px solid #ccd0d6;
   background: #fff;
 }
 .guide li a {
   display: block;
   padding: 5px 10px;
 }
 .guide li a.guide-active {
   color: #fff;
   background-color: #197aff;
 }//
 // Gutter
 // ----------------------------------------------------------------------------------
 .gutter-box {
   margin: 0 auto;
   width: 100%;
   &:before,
   &:after {
     content: "";
     display: table;
     clear: both;
   }
   .column {
     float: left;
   }
   &.gutter-0 {
     margin: 0 0;
     .column {
       padding: 0 0;
     }
   }
   &.gutter-8 {
     margin: 0 -4px;
     .column {
       padding: 0 4px;
     }
   }
   &.gutter-16 {
     margin: 0 -8px;
     .column {
       padding: 0 8px;
     }
   }
   &.gutter-24 {
     margin: 0 -12px;
     .column {
       padding: 0 12px;
     }
   }
   .cols-2 {
     width: 50%;
   }
   .cols-3 {
     width: 33.33%;
   }
   .cols-4 {
     width: 25%;
   }
   .cols-6 {
     width: 16.57%;
   }
   .cols-8 {
     width: 12.5%;
   }
   .cols-12 {
     width: 8.33%;
   }
 }//
 // Input-group
 // ----------------------------------------------------------------------------------
 
 $input-font-size:  12px !default;
 $input-search-input-height: 38px !default;
 $input-search-input-border-width: 1px !default;
 $input-search-input-font-size: 14px !default;
 $input-search-input-line-height: 18px !default;
 
 @mixin input-btn-size($padding, $font-size) {
   padding: $padding;
   font-size: $font-size;
   line-height: $font-size;
 }
 @mixin input-word-spacing($type) {
   @if $type == compressed {
     border-radius: 0;
     text-rendering: optimizespeed;
   } @else if $type == normal {
     @include inline-block();
     letter-spacing: normal;
   }
 }
 
 .input-group {
   border-radius: $input-border-radius;
   @include input-word-spacing(compressed);
 
   input,
   .input-group-addon,
   .input-group-btn {
     @include input-word-spacing(normal);
   }
 
   input {
     height: $input-height;
     line-height: $input-font-size;
     padding: $input-padding;
     font-size: 12px;
   }
 }
 
 .input-group-prepend {
   font-size: 0;
 
   .input-group-addon {
     @include inline-block(top);
     height: $input-height;
     line-height: $input-line-height;
     padding: $input-padding;
     text-align: center;
     border-top-left-radius: $input-border-radius;
     border-bottom-left-radius: $input-border-radius;
     // border-radius: $input-border-radius;
     border: 1px solid $input-border-color;
     border-right: 0;
     background-color: $input-background-color;
     font-size: 12px;
   }
 
   input {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 }
 
 .input-group-append {
   font-size: 0;
 
   .input-group-btn {
     margin-left: -1px;
 
     .btn {
       border-top-right-radius: $input-border-radius;
       border-bottom-right-radius: $input-border-radius;
     }
   }
 
   input {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 }
 
 .input-search {
   input {
     height: $input-search-input-height;
     line-height: $input-search-input-line-height;
     font-size: $input-search-input-font-size;
     border: $input-search-input-border-width solid $input-search-border-color;
     border-right-width: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     width: 338px;
   }
 
   .input-group-btn .btn {
     @include input-btn-size(9px 20px, 18px);
   }
 }
 
 .input-amount {
   @include box-sizing(border-box);
   @include inline-block(middle);
   @include input-word-spacing(compressed);
   border-radius: $input-border-radius;
   font-size: 0;
   line-height: 14px;
   white-space: nowrap;
 
   &:hover {
     border-top: 1px solid $color-primary;
     border-bottom: 1px solid $color-primary;
 
     a, input {
       border-top-width: 0;
       border-bottom-width: 0;
       height: 30px;
     }
 
     a {
       &:first-child {
         border-left-color: $color-primary !important;
       }
 
       &:last-child {
         border-right-color: $color-primary !important;
       }
     }
   }
 
   &.disabled,
   &.readOnly {
     &,
     &:hover {
       border-width: 0;
 
       a, input {
         height: 30px;
         background-color: $color-background;
         border-top: 1px solid $input-disable-border-color;
         border-bottom: 1px solid $input-disable-border-color;
         cursor: not-allowed;
         pointer-events: none;
         color: $input-disable-color;
       }
 
       a {
         border-color: $input-disable-border-color !important;
         color: $input-disable-color;
       }
     }
   }
 
   a,
   input {
     font-size: 12px;
     @include inline-block(middle);
   }
 
   input {
     width: 44px;
     text-align: center;
     border-radius: 0;
     border-left-width: 0;
     border-right-width: 0;
     padding: 0px 10px;
     height: 32px;
     line-height: 32px;
 
     &:focus {
       border-color: $color-border;
     }
   }
 
   a {
     width: 18px;
     text-align: center;
     line-height: 30px;
     color: $color-text;
     border: 1px solid $color-border;
 
     &:hover {
       color: $color-primary;
     }
 
     &.disabled,
     &.readOnly {
       color: $color-text;
       background-color: $color-background;
       border-color: $color-border;
       cursor: not-allowed;
     }
   }
 
   &.group-large {
     height: 32px;
 
     a,input {
       height: 32px;
     }
 
     a {
       height: 32px;
       line-height: 30px;
     }
 
     input {
       width: 64px;
     }
 
     &:hover {
       a,input {
         height: 30px;
       }
     }
 
     &.disabled,
     &.readOnly {
       a,input {
         height: 32px;
       }
     }
   }
 
   &.group-medium {
     height: 28px;
 
     a,input {
       height: 28px;
     }
 
     a {
       height: 28px;
       line-height: 26px;
     }
 
     input {
       width: 44px;
     }
 
     &:hover {
       a,input {
         height: 26px;
       }
     }
 
     &.disabled,
     &.readOnly {
       a,input {
         height: 28px;
       }
     }
   }
 
   &.group-small {
     height: 20px;
 
     a,input {
       height: 20px;
     }
 
     a {
       height: 20px;
       line-height: 18px;
     }
 
     input {
       width: 44px;
       line-height: 18px;
     }
 
     &:hover {
       a,input {
         height: 18px;
       }
     }
 
     &.disabled,
     &.readOnly {
       a,input {
         height: 20px;
       }
     }
   }
 }
 /**
  * laydate-v5.0.9 日期与时间组件 MIT License  http://www.layui.com/laydate/  By 贤心
  *
  * css -> scss
  */
 
 @mixin content-font-color($opacity) {
   color: rgba(0, 0, 0, $opacity);
 }
 
 @mixin background-opacity($color, $opacity) {
   background-color: rgba($color, $opacity);
 }
 
 $calendar-content-padding: 14px;
 $year-li-width: (280 - ($calendar-content-padding * 2)) / 3;
 
 .layui-laydate,
 .layui-laydate-hint {
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
   background-color: #fff;
   color: #666;
 }
 
 .laydate-set-ym,
 .layui-laydate,
 .layui-laydate *,
 .layui-laydate-list {
   box-sizing: border-box;
 }
 
 .layui-laydate * {
   margin: 0;
   padding: 0;
 }
 
 .layui-laydate {
   position: absolute;
   z-index: 66666666;
   margin: 5px 0;
   border-radius: $border-radius-normal;
   font-size: 14px;
   -webkit-animation-duration: 0.3s;
   animation-duration: 0.3s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: laydate-upbit;
   animation-name: laydate-upbit;
   border: none;
 
   .layui-this {
     background-color: transparent;
     color: #fff;
   }
 
   .laydate-disabled,
   .laydate-disabled:hover {
     background: 0 0;
     color: #d2d2d2;
     cursor: not-allowed;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
   }
 }
 
 .layui-laydate-main {
   width: 280px;
 }
 
 .layui-laydate-content td,
 .layui-laydate-header *,
 .layui-laydate-list li {
   transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
 }
 
 @-webkit-keyframes laydate-upbit {
   from {
     -webkit-transform: translate3d(0, 20px, 0);
     opacity: 0.3;
   }
   to {
     -webkit-transform: translate3d(0, 0, 0);
     opacity: 1;
   }
 }
 
 @keyframes laydate-upbit {
   from {
     transform: translate3d(0, 20px, 0);
     opacity: 0.3;
   }
   to {
     transform: translate3d(0, 0, 0);
     opacity: 1;
   }
 }
 
 .layui-laydate-static {
   position: relative;
   z-index: 0;
   display: inline-block;
   margin: 0;
   -webkit-animation: none;
   animation: none;
 }
 
 .laydate-ym-show {
   .laydate-next-y,
   .laydate-prev-y {
     display: inline-block;
   }
 
   .laydate-next-m,
   .laydate-prev-m {
     display: none;
   }
 
   .laydate-set-ym {
     span[lay-type="month"] {
       display: none;
     }
   }
 }
 
 .laydate-time-show {
   .laydate-set-ym {
     span[lay-type="month"],
     span[lay-type="year"] {
       display: none;
     }
   }
 
   .layui-laydate-header {
     .layui-icon {
       display: none;
     }
   }
 }
 
 .layui-laydate-header {
   position: relative;
   padding: 0 70px 0;
   line-height: 40px;
   border-bottom: 1px solid $color-border;
 
   i {
     position: absolute;
     top: 0;
     font-size: 16px;
     @include content-font-color(0.45);
     padding: 0 5px;
     cursor: pointer;
 
     &.laydate-prev-y {
       left: 11px;
     }
 
     &.laydate-prev-m {
       left: 36px;
     }
 
     &.laydate-next-y {
       right: 11px;
     }
 
     &.laydate-next-m {
       right: 36px;
     }
   }
 }
 
 .layui-laydate-header * {
   display: inline-block;
   vertical-align: bottom;
 }
 
 .laydate-set-ym {
   width: 100%;
   text-align: center;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   color: #333333;
   font-weight: bold;
   line-height: 40px;
 
   span {
     padding: 0 3px;
     cursor: pointer;
 
     &:hover {
       color: $color-primary;
     }
   }
 }
 
 .laydate-time-text {
   cursor: default;
 }
 
 .layui-laydate-content {
   position: relative;
   padding: 14px;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   border-top: none 0;
   border-bottom: none 0;
 
   table {
     border-collapse: collapse;
     border-spacing: 0;
   }
 
   th {
     width: 36px;
     height: 30px;
     padding: 0;
     text-align: center;
     font-weight: bold;
     color: #333;
   }
 
   td {
     position: relative;
     cursor: pointer;
     width: 36px;
     height: 30px;
     padding: 0;
     text-align: center;
     @include content-font-color(0.65);
 
     &.laydate-selected {
       @include background-opacity($color-primary, 0.09);
 
       &:hover {
         @include background-opacity($color-primary, 0.09);
       }
     }
 
     &:hover {
       background: none;
 
       .laydate-calendar-day {
         @include background-opacity($color-primary, 0.09);
       }
     }
 
     &.laydate-day-prev,
     &.laydate-day-next {
       @include content-font-color(0.2);
     }
 
     &.layui-this {
       background-color: transparent;
 
       .laydate-day-mark::after {
         display: none;
       }
 
       .laydate-calendar-day,
       .laydate-day-mark {
         color: $white;
         background-color: $color-primary;
       }
     }
   }
 
   .laydate-day-mark,
   .laydate-calendar-week,
   .laydate-calendar-day {
     display: inline-block;
     width: 24px;
     height: 24px;
     padding: 0;
     margin: 6px;
     line-height: 24px;
     border-radius: 2px;
   }
 }
 
 .laydate-day-mark {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   line-height: 30px;
   font-size: 12px;
   overflow: hidden;
 
   &::after {
     position: absolute;
     content: "";
     right: 0;
     top: 0;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background-color: $color-primary;
   }
 }
 
 .layui-laydate-footer {
   position: relative;
   height: 40px;
   line-height: 20px;
   padding: 10px 20px;
   border-top: 1px solid #e2e2e2;
 
   span {
     margin-right: 15px;
     display: inline-block;
     cursor: pointer;
     font-size: 12px;
     color: #333;
 
     &:hover {
       color: $color-link-hover;
     }
   }
 
   .laydate-footer-btns {
     position: absolute;
     right: 10px;
     top: 6px;
 
     span {
       height: auto;
       line-height: 1;
       margin: 0;
       padding: 6px;
       border: none;
       white-space: nowrap;
       color: $color-primary;
       background-color: transparent;
       vertical-align: initial;
       border-radius: 0;
       font-size: 14px;
       font-weight: bold;
     }
   }
 }
 
 .layui-laydate-list {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: #fff;
   padding: $calendar-content-padding;
 
   & > li {
     display: inline-block;
     vertical-align: middle;
     width: $year-li-width;
     height: auto;
     line-height: 1;
     margin: 7px 0;
     position: relative;
     line-height: 36px;
     text-align: center;
     cursor: pointer;
 
     span {
       display: inline-block;
       height: 25px;
       margin: 0;
       padding: 0 5px;
       line-height: 25px;
       border-radius: 2px;
     }
 
     &:hover {
       background-color: transparent;
 
       span {
         @include background-opacity($color-primary, 0.09);
       }
     }
 
     &.layui-this {
       background-color: transparent;
 
       span {
         background-color: $color-primary;
       }
     }
   }
 
 
   &.laydate-month-list {
     & > li {
       margin: 14px 0;
 
       span {
         margin: 5px 0;
       }
     }
   }
 }
 
 .laydate-time-list {
   p {
     position: relative;
     top: -4px;
     line-height: 29px;
   }
 
   > li {
     margin: 0;
     padding: 0;
     height: 100%;
     margin: 0;
     line-height: normal;
     cursor: default;
 
     ol {
       height: 231px;
       border-top: 1px solid $color-border;
       border-right: 1px solid $color-border;
       overflow: hidden;
 
       li {
         width: 130%;
         padding-left: 33px;
         line-height: 30px;
         text-align: left;
         cursor: pointer;
         color: rgba(0, 0, 0, 0.65);
 
         &:hover {
           @include background-opacity($color-primary, 0.09);
         }
       }
 
       .layui-this {
         color: #333;
         background-color: rgba($color-primary, 0.09);
       }
     }
 
     &:hover {
       ol {
         overflow-y: auto;
       }
     }
 
     &:last-child {
       ol {
         border-right: none;
       }
     }
   }
 }
 
 
 .layui-laydate-range {
   width: 562px;
 
   .layui-laydate-main {
     display: inline-block;
     vertical-align: middle;
   }
 
   .laydate-main-list-0 {
     .laydate-next-m,
     .laydate-next-y {
       display: none;
     }
   }
 
   .laydate-main-list-1 {
     width: 281px;
 
     .laydate-prev-m,
     .laydate-prev-y {
       display: none;
     }
 
     .layui-laydate-content {
       border-left: 1px solid #e2e2e2;
     }
   }
 }
 
 .layui-laydate-hint {
   position: absolute;
   top: 115px;
   left: 50%;
   width: 250px;
   margin-left: -125px;
   line-height: 20px;
   padding: 15px;
   color: $color-warning;
   text-align: center;
   font-size: 12px;
 }
 //
 // List
 // ----------------------------------------------------------------------------------
 
 .list {
   ul {
     margin: 0;
     padding: 0;
     list-style: none;
     width: 100%;
     padding-top: 10px;
 
     li {
       float: left;
       position: relative;
       width: 230px;
       height: 320px;
       padding: 10px;
       margin: 0 10px 10px 0;
       border-radius: 0;
       border: 1px solid $color-border;
 
       &:hover {
         border: 1px solid transparent;
         border-color: $list-border-color;
       }
 
       &.last {
         margin-right: 0;
       }
 
       &.product {
 
         a {
           color: $color-text;
 
           &:hover {
             text-decoration: underline;
             color: $list-border-color;
           }
         }
 
         .product-image {
           width: 206px;
           height: 206px;
         }
 
         .product-price {
           margin: 10px 0;
 
           .currency {
             font-size: 18px;
             font-weight: normal;
           }
         }
 
         .product-desc {
           display: block;
           overflow: hidden;
           height: 36px;
           line-height: 18px;
           margin-top: -5px;
         }
 
         .product-owner {
           position: absolute;
           left: 10px;
           top: 296px;
 
           a {
             color: $color-text;
           }
         }
       }
     }
   }
 }
 
 .list-squared {
   ul {
     li {
       width: 324px;
       height: 392px;
       padding: 6px;
       border-radius: 0;
       margin: 0 10px 10px 0;
 
       &.product {
         .product-image {
           width: 310px;
           height: 310px;
         }
 
         .product-price {
           margin: 10px 0;
 
           .currency {
             font-size: 13px;
             font-weight: bold;
           }
         }
       }
     }
   }
 }
 
 .list-condensed {
   ul {
     li {
       width: 244px;
       height: 312px;
       margin: 0 8px 8px 0;
 
       &.product {
         .product-image {
           width: 230px;
           height: 230px;
         }
 
         .product-price {
           margin: 10px 0;
 
           .currency {
             font-size: 13px;
             font-weight: bold;
           }
         }
       }
     }
   }
 }
 //
 // Menus
 // ----------------------------------------------------------------------------------
 
 $menu-caret-size: 5px !default;
 $menu-list-padding: 8px !default;
 
 @mixin menu-arrow {
   content: "";
   position: absolute;
   display: block;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 6px;
 }
 
 .menu {
   ul {
     padding: 0;
     margin: 0;
     list-style: none;
     border: 1px solid $color-menu-border;
     border-radius: 0;
 
     li {
       padding: $menu-list-padding;
 
       a {
         color: $color-text;
       }
 
       &:hover {
         background-color: $color-menu-background;
         cursor: pointer;
       }
 
       &.active {
         background-color: $color-menu-active;
         cursor: default;
 
         a {
           color: $color-link;
         }
       }
 
       &.sup {
         border-bottom: 1px solid $color-menu-border;
       }
 
       &.sub {
         padding-left: 25px;
       }
 
       span.caret {
         width: 0;
         height: 0;
         margin-top: -1px;
         margin-right: 4px;
         @include inline-block(middle);
         border-top: $menu-caret-size solid #666;
         border-right: $menu-caret-size solid transparent;
         border-left: $menu-caret-size solid transparent;
         content: "";
       }
 
       span.caret.reverse {
         margin-top: -7px;
         border-top: $menu-caret-size solid transparent;
         border-bottom: $menu-caret-size solid #666;
       }
     }
   }
 }
 
 .menu-dropdown {
   position: relative;
   z-index: 20;
 
   ul {
     background-color: #fff;
     height: 198px;
     overflow: auto;
 
     li {
       padding: 0 10px;
       margin-bottom: 1px;
       padding-bottom: 0;
       line-height: 32px;
 
       label {
         color: #24344e;
       }
 
       &:hover {
         background-color: $color-menu-background;
       }
 
       &.active {
         background-color: $color-menu-active;
 
         label {
           color: $color-primary;
         }
       }
     }
   }
 
   &.left {
     &:before {
       @include menu-arrow();
       left: -12px;
       top: 8px;
       border-color: transparent $color-menu-border transparent transparent;
     }
 
     &:after {
       @include menu-arrow();
       left: -11px;
       top: 8px;
       border-color: transparent #fff transparent transparent;
     }
   }
 
   &.up {
     &:before {
       @include menu-arrow();
       top: -12px;
       left: 8px;
       border-color: transparent transparent $color-menu-border transparent;
     }
 
     &:after {
       @include menu-arrow();
       top: -11px;
       left: 8px;
       border-color: transparent transparent #fff transparent;
     }
   }
 }
 
 .angle {
   font-size: 80%;
   margin-left: -2px;
   padding-right: 4px;
   color: $color-text;
   @include inline-block(middle);
 }
 .pk-message {
   z-index: 1001;
   position: fixed;
   top: 10px;
   width: 100%;
   text-align: center;
 
   & > div {
     display: inline-block;
     box-shadow: 0px 2px 8px 0px rgba(207,208,215,0.50);
     padding: 11px;
     border-radius: $border-radius-normal;
     background: #FFFFFF;
 
     p {
       margin: 0px;
       color: $color-secondary;
     }
 
     .icon-pokeball {
       margin-right: 8px;
       margin-top: -2px;
     }
 
     .error-status {
       color: $color-danger;
     }
 
     .info-status {
       color: $color-info;
     }
 
     .warning-status {
       color: $color-warning;
     }
 
     .success-status {
       color: $color-success;
     }
   }
 }
 //
 // Modals
 // ----------------------------------------------------------------------------------
 @mixin content-font-color($opacity) {
   color: rgba(0, 0, 0, $opacity);
 }
 
 $modal-border-radius: $border-radius-normal !default;
 
 .modal {
   z-index: 999;
   position: absolute;
   background-color: #fff;
   border-radius: $modal-border-radius;
   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
 
   .modal-header {
     color: $color-text;
     padding: 20px;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
     border-bottom: 1px solid #dfdfdf;
 
     h2 {
       margin: 0;
       font-size: 16px;
       line-height: 22px;
       @include content-font-color(0.65);
     }
 
     i {
       font-size: 12px;
       line-height: 1;
       padding: 21px;
       position: absolute;
       right: 0;
       top: 0;
       @include content-font-color(0.25);
 
       &:hover {
         @include content-font-color(0.65);
         cursor: pointer;
       }
     }
 
     a {
       float: right;
       display: inline-block;
       font-size: 15px;
       color: $modal-color;
       margin-top: -2px;
 
       i {
         font-size: 20px;
         font-weight: bold;
       }
     }
   }
 
   .modal-body {
     padding: 20px 20px 16px 20px;
     @include min-height(200px);
   }
 
   .modal-footer {
     padding: 16px 20px 20px 20px;
     text-align: right;
     border-top: 1px solid #dfdfdf;
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px;
   }
 }
 
 .modal-image-selector {
   width: 702px;
 
   .modal-body {
     padding: 15px;
 
     .modal-body-heading {
       width: 100%;
       position: relative;
       margin-bottom: 10px;
       @include inline-block(middle);
 
       .modal-body-heading-note {
         width: 80%;
         line-height: 18px;
         @include inline-block(middle);
       }
 
       .btn-upload {
         position: absolute;
         right: 0;
       }
     }
 
     .modal-body-content {
       border: 1px solid $color-border;
       padding-bottom: 15px;
       @include min-height(165px);
 
       ul.modal-image-list {
         margin: 0;
         padding: 0;
         list-style: none;
         overflow: hidden;
 
         li {
           float: left;
           margin: 15px;
           border: 2px solid transparent;
           box-shadow: 1px 1px 5px #ddd;
           position: relative;
 
           &:hover,
           &.active {
             border: 2px solid $color-primary;
             @include transition(0.3s linear border-color);
           }
 
           &:hover {
             .btn-trash {
               display: block;
             }
           }
 
           .modal-image {
             width: 100px;
             height: 100px;
           }
 
           img {
             width: 100%;
             height: 100%;
             vertical-align: bottom;
           }
 
           .btn-trash {
             display: none;
             position: absolute;
             right: 4px;
             top: 80px;
             padding: 1px;
           }
 
           &.last {
             margin-right: 0;
           }
         }
       }
 
       .pagination {
         width: 100%;
       }
     }
 
     .image-addr-wrap {
       padding: 10px 0 0 0;
 
       .image-address {
         width: 100%;
       }
     }
   }
 }
 
 .modal-image-selector-use {
   .modal-body-heading-note {
     min-height: 36px;
   }
   .modal-image-class {
     float: left;
     li {
       float: left;
       padding: 0 5px;
       height: 30px;
       line-height: 30px;
       text-align: center;
       cursor: pointer;
       list-style: none;
       color: $color-overlay;
       &.active {
         color: #000;
       }
     }
   }
   .modal-local-list {
     height: 30px;
     line-height: 30px;
     overflow: hidden;
     zoom: 1;
   }
 
   .modal-image-list {
     width: 670px;
 
     li {
       list-style: none;
 
       .item-name {
         color: #fff;
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         text-indent: 3px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         text-align: center;
         background-color: rgba(0, 0, 0, .5);
         background-color: $color-background \9;
       }
 
       .btn-trash {
         z-index: 2;
       }
     }
 
     i {
       font-size: 50px;
       width: 100%;
       text-align: center;
       line-height: 104px;
       color: $color-info;
     }
   }
 }
 
 .modal-dialog {
   z-index: 1000;
   padding: 32px 32px 24px 32px;
   min-width: 240px;
   line-height: 18px;
 
   .modal-dialog-icon {
     float: left;
     height: 22px;
     width: 22px;
     margin-right: 16px;
 
     i {
       @include inline-block(middle);
       font-size: 22px;
       line-height: 1;
     }
 
     .error-status {
       color: $color-danger;
     }
 
     .info-status {
       color: $color-info;
     }
 
     .warning-status {
       color: $color-warning;
     }
 
     .success-status {
       color: $color-success;
     }
   }
 
   .modal-dialog-message {
     float: left;
     font-size: 12px;
     max-width: 400px;
     min-width: 200px;
 
     h3 {
       font-size: 16px;
       line-height: 21px;
       margin: 0;
       @include content-font-color(0.85);
       letter-spacing: 1px;
     }
 
     p {
       margin: 12px 0 0 0;
       font-size: 14px;
       @include content-font-color(0.65);
       line-height: 22px;
     }
   }
 
   .modal-controls {
     text-align: right;
     margin-top: 24px;
   }
 }
 
 .overlay {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 998;
   background-color: $color-background;
   @include opacity(0.8);
 }
 //
 // Navbars
 // ----------------------------------------------------------------------------------
 
 $navbar-width: 80px !default;
 $navbar-height: 40px !default;
 $navbar-padding: 10px !default;
 $navbar-collapse-width: 1000px !default;
 
 $navbar-condensed-font-size: 14px !default;
 $navbar-condensed-line-height: 40px !default;
 $navbar-condensed-padding: 0 18px !default;
 $navbar-condensed-collapse-width: 1200px !default;
 
 $navbar-top-width: auto !default;
 $navbar-top-height: 12px !default;
 $navbar-top-line-height: 30px !default;
 $navbar-top-padding: 9px 10px 9px 15px !default;
 $navbar-color: $color-primary !default;
 
 .navbar {
   background-color: $navbar-color;
 
   .navbar-collapse {
     border: 0;
     margin: 0 auto;
     border-radius: 0;
     overflow: hidden;
     width: $navbar-collapse-width;
 
     .navbar-header {
       float: left;
     }
 
     ul {
       padding: 0;
       margin: 0;
       float: right;
 
       li {
         border: 0;
         padding: $navbar-padding;
         width: $navbar-width;
         line-height: $navbar-height;
         color: white;
         text-align: center;
         overflow: hidden;
         @include inline-block(middle);
 
         &:hover,
         &.active {
           cursor: pointer;
           background-color: $navbar-color;
           @include transition(0.3s linear background-color);
         }
 
         .navbar-item {
           line-height: 16px;
 
           i {
             @include inline-block(baseline);
           }
 
           a {
             color: white;
           }
         }
 
         .navbar-header {
           @include inline-block(middle);
         }
       }
     }
   }
 }
 
 .navbar-condensed {
 
   .navbar-collapse {
     width: $navbar-condensed-collapse-width;
 
     ul {
       float: left;
 
       li {
         width: auto;
         height: auto;
         //padding: 10px 16px;
         float: left;
         padding: 0;
 
         &:first-child,
         &.first {
           margin-left: 0;
         }
 
         &:hover,
         &.active {
           background-color: $navbar-color;
         }
 
         a {
           display: block;
           font-size: $navbar-condensed-font-size;
           line-height: $navbar-condensed-line-height;
           padding: $navbar-condensed-padding;
         }
       }
     }
   }
 }
 
 .navbar-primary {
   background-color: $color-primary;
 
   .navbar-collapse {
     ul {
       li {
         &:hover,
         &.active {
           background-color: $color-primary;
         }
       }
     }
   }
 }
 
 .navbar-top {
   font-size: 12px;
   background-color: transparent;
 
   .navbar-collapse {
     .navbar-header {
       line-height: $navbar-top-line-height;
     }
 
     ul {
       li {
         width: $navbar-top-width;
         line-height: $navbar-top-height;
         padding: $navbar-top-padding;
         color: $color-text;
 
         &.active,
         &:hover {
           background-color: transparent;
         }
 
         a {
           @include link-colors($color-text, $navbar-color);
         }
       }
     }
   }
 }
 //
 // Navs
 // ----------------------------------------------------------------------------------
 
 .nav-group {
   border: 1px solid $color-border;
   padding: 0 10px;
 
   dl {
     margin: 0;
     width: 100%;
     line-height: 32px;
     border-bottom: 1px dashed $color-border;
     padding: 5px 0;
 
     &:last-child {
       border-bottom: 0;
     }
 
     dt,
     dd {
 
       @include inline-block(middle);
 
       a:hover {
         text-decoration: underline;
         color: $color-link;
       }
     }
 
     dt {
       position: relative;
       top: 1px;
       width: 140px;
       padding: 0 40px 0 20px;
       color: $color-info;
     }
 
     dd {
       margin: 0 20px 0 5px;
 
       a {
         color: $color-text;
       }
 
       span {
         margin-left: 2px;
         color: $color-info;
       }
     }
   }
 }
 .pk-notice {
   padding: $notice-padding;
   background: $notice-background;
   font-size: 12px;
   line-height: 18px;
   color: $color-text-note;
   border-radius: $border-radius-normal;
 
   &.notice-error {
     background: $notice-error-background;
   }
 
   .notice-major {
     color: $color-danger;
     font-weight: bold;
   }
 
   .notice-info {
     color: $color-success;
     font-weight: bold;
   }
 
   .notice-note {
     color: $color-text-assist;
   }
 
   .notice-secondary {
     color: $color-text;
     font-weight: bold;
   }
 }
 @mixin notice-color ($color) {
   .notice-icon {
     color: $color;
   }
 }
 
 .notice-success {
   @include notice-color($color-success);
 }
 
 .notice-warning {
   @include notice-color($color-warning);
 }
 
 .notice-error {
   @include notice-color($color-danger);
 }
 
 .notice-info {
   @include notice-color($color-info);
 }
 
 .terminus-notification {
   position: fixed;
   right: 0;
   bottom: auto;
   z-index: 1000;
   max-width: 600px;
   min-width: 300px;
   margin-right: 24px;
 
   .notice-item {
     position: relative;
     right: -120%;
     padding: 14px 24px;
     margin-bottom: 16px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
     border-radius: $border-radius-normal;
 
     &.customized {
       padding-left: 64px;
 
       .notice-icon {
         top: 16px;
         left: 24px;
         position: absolute;
 
         i {
           font-size: 24px;
         }
       }
     }
 
     h3 {
       position: relative;
       padding-right: 24px;
       margin: 0 0 8px;
       font-size: 16px;
       color: rgba(0,0,0,0.85);
       line-height: 24px;
 
       .close-notice {
         position: absolute;
         font-weight: 100;
         right: 0;
         top: -1px;
         color: rgba(0,0,0,0.45);
         cursor: pointer;
 
         i {
           font-size: 14px;
         }
       }
     }
 
     p {
       margin: 0;
       font-size: 14px;
       color: rgba(0,0,0,0.65);
       line-height: 22px;
     }
 
     .notice-btn-wrap {
       text-align: right;
       margin-top: 24px;
     }
   }
 }
 //
 // Paginations
 // ----------------------------------------------------------------------------------
 
 .pagination {
   text-align: center;
   @include inline-block(middle);
 
   a,
   span {
     @include inline-block(middle);
     padding: 6px 11px;
     border: 1px solid $pagination-border-color;
     margin-left: -1px;
     background-color: white;
     height: 32px;
     border-radius: $border-radius-large;
 
     @if $border-radius-large == 0 {
       margin-right: 0;
     } @else {
       margin-right: 8px;
     }
   }
 
   span.current {
     color: $color-primary;
     // background-color: $color-primary;
     border: 1px solid $color-primary;
     position: relative;
 
     &.prev,
     &.next {
       color: $pagination-border-color;
       background-color: white;
       border: 1px solid $pagination-border-color;
     }
   }
 
   span.ellipse-span {
     @if $border-radius-large != 0 {
       border: none;
     }
   }
 
   a {
     color: $color-text;
     &:visited {
       color: $color-text;
     }
   }
 
   a:hover {
     color: $color-primary;
 
     @if $border-radius-large != 0 {
       border: 1px solid $color-primary;
     }
   }
   // .prev {
   //   border-top-left-radius: 0;
   //   border-bottom-left-radius: 0;
   // }
 
   // .next {
   //   border-top-right-radius: 0;
   //   border-bottom-right-radius: 0;
   // }
 
   input[name="go-page"]{
     width: 36px;
     height: 32px;
     border: 1px solid $pagination-border-color;
     margin-left: 10px;
     vertical-align: middle;
     text-align: center;
     border-radius: $border-radius-large;
 
     &:focus{
       outline: none;
     }
   }
   button[type="button"]{
     height: 32px;
     padding: 9px 7px;
     border: 1px solid $pagination-border-color;
     vertical-align: middle;
     text-align: center;
     background-color: #fff;
     color: #666;
     margin-left: 10px;
 
     &:focus{
       outline: none;
     }
   }
 
   .handler,
   .total,
   .size,
   .no-text,
   .page-text {
     @include inline-block(middle);
   }
 
   .no-text,
   .page-text {
     margin-left: 10px;
   }
 
   .selectric-wrapper {
     margin: 0 10px;
   }
 
   select,
   .selectric {
     border: 1px solid $pagination-border-color;
     width: 74px;
     padding: 6px 5px;
 
     .button {
       border-left: 1px solid $pagination-border-color;
     }
 
     .label {
       border: 0;
       padding: 0;
     }
   }
 }
 //
 // Progresses
 // ----------------------------------------------------------------------------------
 
 .progress {
 
   ol {
     padding: 0;
     list-style: none;
     color: white;
     margin-bottom: 40px;
   }
 
   li {
     @include inline-block(middle);
   }
 
   .progress-step {
     position: relative;
     text-align: center;
     font-size: 0;
 
     .progress-step-number {
       @include inline-block();
       width: $progress-step-height;
       height: $progress-step-height;
       line-height: $progress-step-height;
       border-radius: 50%;
       background-color: #dfdfdf;
     }
 
     &.active {
       .progress-step-number {
         width: $progress-active-step-height;
         height: $progress-active-step-height;
         background-color: $progress-step-active-color;
         border: 1px solid $progress-step-active-color;
         color: #fff;
       }
 
       .progress-step-into {
         color: $progress-step-active-color;
       }
     }
 
     &.past {
       .progress-step-number {
         background-color: $progress-step-active-color;
         border: 1px solid $progress-step-active-color;
         color: $progress-step-active-color;
       }
 
       .icon-pokeball-gou {
         font-size: 10px;
         height: 12px;
         line-height: 8px;
       }
 
       .progress-step-into {
         color: $progress-step-color;
       }
     }
 
     .progress-step-into {
       position: absolute;
       @include inline-block(middle);
       width: $progress-step-into-width;
       color: $progress-step-color;
       left: ($progress-step-height - $progress-step-into-width)/2;
       top: $progress-step-height * 3;
       font-size: 12px;
 
       &.up {
         top: -25px;
       }
     }
   }
 
   .progress-bar {
     width: $progress-bar-width;
     height: $progress-bar-height;
     background-color: #f5f5f5;
 
     &.active {
       background-color: $progress-step-active-color;
     }
   }
 
   .progress-branch {
     position: absolute;
 
     .progress-branch-ol {
       padding: 0;
       margin: 0;
     }
 
     .progress-branch-bar {
       float: left;
       width: $progress-bar-height;
       height: 55px;
       margin-top: 20px;
       background-color: $progress-step-color;
       margin-left: -15px;
       margin-left: -11px\9;
 
       &.end {
         height: 55px;
         margin-left: -17px;
       }
 
       &.active {
         background-color: $progress-step-active-color;
       }
     }
 
     .progress-bar {
       margin-top: 67px;
       margin-left: -15px;
       margin-left: -10px\9;
       float: left;
 
       &.first {
         width: 150px;
         width: 140px\9;
       }
     }
 
     .progress-step {
       float: left;
       vertical-align: middle;
       margin-top: 58px;
     }
   }
 }
 
 @if $use-old-progress == 1 {
   .progress {
 
     li {
       margin-left: -5px;
     }
 
     .progress-step {
       position: relative;
       text-align: center;
       font-size: 12px;
 
       .progress-step-number {
         width: $progress-step-height-old;
         height: $progress-step-height-old;
         line-height: $progress-step-height-old;
         background-color: #fff;
         font-size: 12px;
         border: 1px solid #d8d8d8;
         color: #ccc;
       }
 
       &.active {
         .progress-step-number {
           width: $progress-step-height-old;
           height: $progress-step-height-old;
         }
 
         .progress-step-into {
           color: $progress-step-active-color;
         }
       }
 
       &.past {
         .progress-step-number {
           background-color: #fff;
         }
       }
 
       .progress-step-into {
         position: static;
         width: auto;
         margin: 0 10px 0px 4px;
         vertical-align: middle;
       }
     }
 
     .progress-bar {
       width: $progress-bar-width-old;
       height: 1px;
       margin-right: 10px;
       background-color: #c0c0c0;
     }
 
     .progress-branch {
       .progress-branch-bar {
         width: $progress-bar-height-old;
       }
     }
   }
 }
 //
 // Radio
 // ----------------------------------------------------------------------------------
 
 $radio-width: 16px !default;
 $radio-height: $radio-width !default;
 $radio-background-color: #fff !default;
 $radio-border-color: $color-border !default;
 $radio-border-radius: 50% !default;
 $radio-hover-border-color: $color-primary !default;
 $radio-readonly-color: $color-border !default;
 $radio-disabled-background-color: $color-background !default;
 $radio-disabled-color: $color-border-disable !default;
 $radio-spacing: 8px;
 
 input[type=radio].input-radio {
   @include inline-block(baseline);
   height: $radio-height;
   width: $radio-width;
   border-radius: $radio-border-radius;
   margin-right: $radio-spacing;
   position: relative;
   -webkit-appearance: none;
   appearance: none;
 
   &:before {
     border-radius: $radio-border-radius;
     height: $radio-height;
     width: $radio-width;
     border: 1px solid $radio-border-color;
     background-color: $radio-background-color;
     position: absolute;
     content: "";
   }
 
   &:hover {
     &:before {
       border: 1px solid $radio-hover-border-color;
     }
   }
 
   &:after {
     width: 8px;
     height: 8px;
     left: 4px;
     top: 4px;
     position: absolute;
     border-radius: 50%;
     content: "";
     background-color: $transparent;
   }
 
   &:checked {
     &:before {
       border-color: $color-primary;
     }
 
     &:after {
       width: 8px;
       height: 8px;
       left: 4px;
       top: 4px;
       position: absolute;
       border-radius: 50%;
       content: "";
       background-color: $color-primary;
     }
   }
 
   &:focus {
     outline: none;
   }
 
   &[readonly] {
     cursor: not-allowed;
     pointer-events: none;
 
     &:before {
       border: 1px solid $radio-border-color;
     }
 
     &:checked {
       &:after {
         background-color: $radio-readonly-color;
       }
     }
   }
 
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
     cursor: not-allowed;
     pointer-events: none;
 
     &:before {
       border: 1px solid $radio-disabled-color;
       background-color: $radio-disabled-background-color;
     }
 
     &:checked {
       &:after {
         background-color: $radio-disabled-color;
       }
     }
   }
 }
 //
 // Selectric
 // ----------------------------------------------------------------------------------
 
 $selectric-spacing: 5px;
 $selectric-border-width: 1px;
 $selectric-option-bg-color: #f0f0f0 !default;
 
 .selectric-wrapper {
   position: relative;
   cursor: pointer;
   text-align: left;
   @include inline-block(middle);
 }
 
 .selectric-responsive {
   width: 100%;
 }
 
 .selectric {
   border: $selectric-border-width solid $color-border;
   background: #fff;
   position: relative;
   width: 190px;
   padding: 6px 5px;
   border-radius: $border-radius-normal;
 
   &.selectric-mini {
     width: 64px;
   }
 
   .label {
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin: 0 $selectric-spacing;
     line-height: 1.5em;
     height: 1.5em;
     color: $color-text;
   }
 
   .selectric-value-item {
     margin: 3px 5px 2px 0;
     background-color: $selectric-option-bg-color;
     padding: 2px 5px;
     cursor: default;
 
     .selectric-item-cancel {
       cursor: pointer;
       padding-left: 6px;
     }
   }
 
   .button {
     display: block;
     position: absolute;
     right: 0;
     top: 0;
     width: 28px;
     height: 30px;
     color: rgba(0, 0, 0, 0.25);
     text-align: center;
     line-height: 30px;
 
     // &:after {
     //   content: " ";
     //   position: absolute;
     //   top: 0;
     //   right: 0;
     //   bottom: 0;
     //   left: 0;
     //   margin: auto;
     //   width: 0;
     //   height: 0;
     //   border: 4px solid transparent;
     //   border-top-color: $color-text-assist;
     //   border-bottom: none;
     // }
   }
 }
 
 .selectric-multi-line {
   .selectric-items {
     top: unset;
   }
 
   .selectric {
     .label {
       height: unset;
       white-space: normal;
       overflow: unset;
       text-overflow: unset;
       word-break: break-all;
     }
 
     .selectric-value-item {
       display: inline-block;
       line-height: 16px;
     }
   }
 }
 
 .selectric-hover .selectric {
   border-color: $color-border;
 }
 
 .selectric-open {
   z-index: 9999;
 
   .selectric {
     border-color: $color-primary;
     color: $color-primary;
 
     .label {
       color: $color-primary;
     }
   }
 
   .selectric-items {
     display: block;
   }
 }
 
 .selectric-disabled,
 .selectric-readonly {
   filter: alpha(opacity=50);
   opacity: 0.5;
   cursor: default;
   pointer-events: none;
   user-select: none;
 
   .selectric-item-cancel {
     display: none;
   }
 }
 
 .selectric-hide-select {
   position: relative;
   overflow: hidden;
   width: 0;
   height: 0;
 
   select {
     position: absolute;
     left: -100%;
     display: none;
   }
 }
 
 .selectric-input {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   margin: 0 !important;
   padding: 0 !important;
   width: 1px !important;
   height: 1px !important;
   outline: none !important;
   border: none !important;
   *font: 0/0 a !important;
   background: none !important;
 }
 
 .selectric-temp-show {
   position: absolute !important;
   visibility: hidden !important;
   display: block !important;
 }
 
 @mixin layout ($top, $shadow){
   top: $top;
   box-shadow: $shadow;
 }
 
 @mixin selectricItemStyle ($borderRadius) {
   @if $borderRadius == 0 {
     border: 1px solid $color-border;
     border-top: none;
     @include layout (32px, none);
   } @else {
     @include layout (36px, 0 2px 5px 0 rgba(0,0,0,0.18));
   }
 }
 
 /* Items box */
 .selectric-items {
   display: none;
   position: absolute;
   left: 0;
   background-color: #fff;
   z-index: -1;
   border-radius: $border-radius-normal;
   @include selectricItemStyle($border-radius-normal);
 
   .selectric-scroll {
     height: 100%;
     overflow: auto;
   }
 
   .selectric-above & {
     top: auto;
 
     @if $border-radius-normal == 0 {
       bottom: 32px;
     } @else {
       bottom: 36px;
     }
   }
 
   ul, li {
     list-style: none;
     padding: 0;
     margin: 0;
     font-size: 12px;
     line-height: 20px;
     min-height: 20px;
   }
 
   li {
     display: block;
     padding: 6px 10px;
     color: $color-text;
     cursor: pointer;
 
     &:first-child {
       border-top-left-radius: $border-radius-normal;
       border-top-right-radius: $border-radius-normal;
     }
 
     &:last-child {
       border-bottom-left-radius: $border-radius-normal;
       border-bottom-right-radius: $border-radius-normal;
     }
 
     &.selected {
       background: rgba($color-primary, 0.05);
       color: $color-primary;
     }
 
     &:hover {
       background: rgba($color-primary, 0.05);
     }
   }
 
   .disabled {
     filter: alpha(opacity=50);
     opacity: 0.5;
     cursor: default !important;
     background: none !important;
     color: #666 !important;
     user-select: none;
   }
 
   .selectric-group {
     .selectric-group-label {
       font-weight: bold;
       padding-left: 10px;
       cursor: default;
       user-select: none;
       background: none;
       color: $color-text;
     }
 
     &.disabled li {
       filter: alpha(opacity=100);
       opacity: 1;
     }
 
     li {
       padding-left: 25px;
     }
   }
 }
 .pb-loading-overlay {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0.5;
   position: absolute;
   overflow: hidden;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.9);
   background-color: hsla(0,0%,100%,.9);
 
   .pb-loading-spin {
     width: 100%;
     height: 100%;
     position: relative;
 
     div {
       background-color: $color-primary !important;
     }
   }
 }
 //
 // Suggestion
 // ----------------------------------------------------------------------------------
 
 ul.suggestion {
   position: absolute;
   z-index: 9;
   background-color: white;
   border-top: 0px;
   margin: 0;
   padding: 0;
   list-style: none;
 
   @if $border-radius-normal == 0 {
     border: 1px solid #dddddd;
   } @else {
     margin-top: 4px;
     border-radius: $border-radius-normal;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18);
 
     > li {
       &:first-child {
         a {
           border-top-left-radius: $border-radius-normal;
           border-top-right-radius: $border-radius-normal;
         }
       }
 
       &:last-child {
         a {
           border-bottom-left-radius: $border-radius-normal;
           border-bottom-right-radius: $border-radius-normal;
         }
       }
     }
   }
 }
 
 ul.suggestion li a {
   display: block;
   padding: 6px 12px;
   color: #717171;
 }
 
 ul.suggestion {
   li:hover,
   li.active {
     a {
       color: white;
 
       @if $border-radius-normal == 0 {
         background-color: $color-primary;
       } @else {
         color: $color-primary;
         background-color: rgba($color-primary, 0.05);
       }
     }
   }
 }
 //
 // Switch
 // ----------------------------------------------------------------------------------
 
 .switch.checkbox {
   position: relative;
   display: inline-block;
   backface-visibility: hidden;
   outline: none;
   vertical-align: baseline;
   font-style: normal;
 }
 
 .switch.checkbox input[type="checkbox"] {
   cursor: pointer;
   position: absolute;
   top: 0px;
   left: 0px;
   opacity: 0 !important;
   outline: none;
   z-index: 3;
 }
 
 .switch.checkbox label {
   cursor: auto;
   position: relative;
   display: block;
   padding-left: 40px;
   outline: none;
   min-height: 20px;
 }
 
 .switch.checkbox label:before {
   position: absolute;
   top: 0px;
   left: 0px;
   content: '';
   background: #ccd0d6;
   border-radius: 20px;
   transition: transform 0.1s ease;
 }
 
 .switch.checkbox label:after {
   position: absolute;
   font-size: 14px;
   top: 0px;
   left: 0px;
   text-align: center;
   opacity: 0;
   transition: transform 0.1s ease;
 }
 
 .switch.read-only.checkbox,
 .switch.read-only.checkbox label {
   cursor: default;
 }
 
 
 .switch.disabled.checkbox label,
 .switch.checkbox input[disabled] ~ label {
   cursor: default;
   opacity: 0.5;
   color: #000000;
 }
 
 .switch.checkbox input.hidden {
   z-index: -1;
 }
 
 .switch.checkbox input.hidden + label {
   cursor: pointer;
   user-select: none;
 }
 
 .switch.toggle.checkbox input {
   width: 36px;
   height: 20px;
 }
 
 .switch.toggle.checkbox label:before {
   display: block;
   position: absolute;
   content: '';
   z-index: 1;
   transform: none;
   border: none;
   background: #ccd0d6;
   width: 36px;
   height: 20px;
   border-radius: 20px;
 }
 
 .switch.toggle.checkbox label:after {
   background: #ffffff;
   position: absolute;
   content: '' !important;
   opacity: 1;
   z-index: 2;
   border: none;
   width: 14px;
   height: 14px;
   top: 3px;
   left: 3px;
   border-radius: 20px;
   transition: background 0.3s ease, left 0.3s ease;
 }
 
 .switch.toggle.checkbox input ~ label:after {
   left: 3px;
 }
 .switch.toggle.checkbox input:checked ~ label:before {
   background-color: #2dc12d;
 }
 .switch.toggle.checkbox input:checked ~ label:after {
   left: 18px;
 }
 //
 // Tables
 // ----------------------------------------------------------------------------------
 
 .table {
   background-color: $table-background-color;
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
   color: $table-text-color;
   border-radius: $border-radius-normal;
 
   thead {
     background-color: $thead-background-color;
     box-shadow: 0 1px 0 0 #E8E8E8;
 
     th {
       font-weight: bold;
     }
 
     th:first-child {
       border-top-left-radius: $border-radius-normal;
     }
 
     th:last-child {
       border-top-right-radius: $border-radius-normal;
     }
   }
 
   td,
   th {
     height: $th-height;
     border: 0;
     margin: 0;
     font-weight: normal;
     vertical-align: middle;
     padding: $td-padding;
     text-align: left;
   }
 
   td {
     height: $td-height;
     vertical-align: middle;
     word-wrap: break-word;
     border-bottom: 1px solid $table-border-color;
   }
 
   tbody tr:hover {
     background-color: $tr-hover-background-color;
   }
 
   tbody tr:hover td,
   .tr-danger td{
     color: $td-hover-color;
   }
 
   thead {
     vertical-align: bottom;
   }
   .td-operation {
     text-align: right;
   }
 
   tfoot {
     background-color: $tfoot-background-color;
   }
 }
 
 .tr-danger {
   background-color: $tr-danger-background-color;
 }
 
 .th-checkbox {
   width: 25px;
   padding-left: 11px;
 }
 
 .table-horizontal {
 
   td{
     padding-top: 15px;
   }
 }
 
 .table-fixed {
   table-layout: fixed;
 
   td,
   th {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 }
 
 .table-no-results {
 
   tbody tr:hover {
     background-color: $white;
   }
   td {
     line-height: 108px;
     text-align: center;
   }
 }
 
 .table-grid {
   th,
   td {
     border-top: none;
     border-right: 1px solid $table-border-color;
     border-bottom: 1px solid $table-border-color;
     border-left: none;
 
     &:first-child {
       border-left: 1px solid $table-border-color;
     }
   }
 
   th {
     border-top: 1px solid $table-border-color;
   }
 }
 /* 表格组件 */
 .component-table-grid {
   position: relative;
 
   table {
     position: relative;
     table-layout: fixed;
     width: auto;
     border-collapse: separate;
     background-color: $white;
 
     th,
     td {
       position: relative;
     }
 
     tr.hover {
       background-color: $tr-hover-background-color;
     }
   }
 
   &.fixed-table-grid {
 
     .table-grid-thead,
     .table-grid-tfoot {
       overflow: hidden;
     }
 
     .table-grid-tbody {
       overflow: auto;
     }
   }
 
   .table-grid-fixed-container {
     position: absolute;
     top: 0;
     overflow: hidden;
 
     .table-grid-fixed-tbody {
       overflow: hidden;
     }
   }
 
   .table-grid-fixed-left {
     left: 0;
   }
 
   .table-grid-fixed-right {
     right: 1px;
     box-shadow: -6px 0 6px -4px rgba(0,0,0,.15);
   }
 
   .js-table-grid-resize {
     position: absolute;
     display: block;
     width: 1px;
     height: 100%;
     background-color: $table-border-color;
     top: 0;
     right: 0;
     padding: 0;
     cursor: col-resize;
   }
 
   &.dragged {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
 
   .js-drag-position-line {
     position: absolute;
     top: 0;
     width: 1px;
     height: 100%;
     background-color: $table-border-color;
   }
 
   .table-sort-container {
     float: right;
     margin-left: 10px;
 
     .table-sort-controller {
       width: 0;
       height: 0;
       margin-right: 4px;
       display: block;
       border-top: 5px solid #666;
       border-right: 5px solid transparent;
       border-left: 5px solid transparent;
       content: "";
       cursor: pointer;
 
       &.sort-asc {
         margin-top: -3px;
         margin-bottom: 3px;
         border-top: 5px solid transparent;
         border-bottom: 5px solid #666;
       }
     }
   }
 
   .table-search-container {
     float: right;
     cursor: pointer;
   }
 }
 
 .table-search-input-container {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
   padding: 4px;
   background-color: $white;
 }
 //
 // Tabs
 // ----------------------------------------------------------------------------------
 
 .tab {
   .tab-navs {
     margin: 0;
     padding: 0;
     list-style: none;
 
     li {
       float: left;
       position: relative;
       margin-right: 3px;
       border-top-left-radius: $border-radius-normal;
       border-top-right-radius: $border-radius-normal;
 
       &.active {
         background-color: $white;
 
         a {
           color: $color-primary;
           font-weight: bold;
 
           &:hover {
             color: $color-primary;
           }
         }
       }
 
       a {
         color: $tab-body-color;
         display: block;
         font-size: 14px;
         border-top-width: 0;
         border-left: 0;
         border-right: 0;
         padding: 12px 16px;
         opacity: 70% \9;
         border-top-left-radius: $border-radius-normal;
         border-top-right-radius: $border-radius-normal;
 
         &:hover {
           color: $tab-primary-hover-color;
         }
       }
 
       .nav-note {
         @include inline-block(top);
         max-width: 24px;
         overflow: hidden;
         margin-left: 7px;
         color: $tab-primary-hover-color;
 
         &.show {
           color: #9b9b9b;
         }
       }
     }
   }
 
   .tab-contents {
     padding-top: 20px;
     background-color: #fff;
 
     .tab-content {
       @include min-height(100px);
     }
   }
 }
 
 .tab-condensed {
   .tab-navs {
 
     li {
       margin-bottom: -1px;
 
       &.active {
         a {
           border-bottom: 0;
         }
       }
 
       a {
         font-size: 12px;
         border-width: 0;
         border-top-width: 0;
         padding: 6px 16px;
       }
     }
   }
 }
 
 .tab-reversed {
   .tab-navs {
     background-color: transparent;
     border-bottom: 2px solid $tab-li-color;
 
     li {
       margin-bottom: 0;
 
       &.active {
         a {
           color: #fff;
           border-color: $tab-li-color;
           background-color: $tab-li-color;
 
           &:hover {
             color: #fff;
           }
 
         }
       }
     }
 
     a {
       background-color: transparent;
     }
   }
 }
 //
 // Timelines
 // ----------------------------------------------------------------------------------
 
 @mixin timeline-transition {
   content: "";
   position: absolute;
   border: 1px dashed $color-border;
   border-top: 0;
   border-bottom: 0;
   height: 99px;
   display: block;
   left: 1px;
 }
 
 .timeline {
   td {
     overflow: hidden;
     height: 40px;
     padding: 10px;
 
     &.first {
       padding: 0;
     }
   }
 
   .point {
     @include inline-block(baseline);
     position: relative;
     border-radius: 10px;
     border: 2px solid #e5e5e5;
     width: 8px;
     height: 8px;
 
     &.success, &.error, &.info {
       &:before, &:after {
         border-style: solid;
         border-color: $color-border;
 
       }
     }
 
     &.success {
       border-color: #2dc12d;
 
       &.current {
         background-color: #2dc12d;
       }
     }
 
     &.error {
       border-color: #ff2200;
 
       &.current {
         background-color: #ff2200;
       }
     }
 
     &.info {
       border-color: #4c97ff;
 
       &.current {
         background-color: #4c97ff;
       }
     }
 
     &.current {
       &:after {
         border-style: dashed;
         border-color: #e5e5e5;
       }
     }
 
     &.first {
       &:before {
         visibility: hidden;
       }
     }
 
     &.last {
       &:after {
         visibility: hidden;
       }
     }
 
     &:before {
       @include timeline-transition();
       top: -101px;
     }
 
     &:after {
       @include timeline-transition();
       top: 6px;
     }
   }
 }
 //
 // Alerts
 // ----------------------------------------------------------------------------------
 
 .tip {
   position: relative;
   left: 4px;
   z-index: 20;
   padding: 0 10px;
   height: 28px;
   line-height: 26px;
   @include inline-block(middle);
   border: 1px solid white;
   color: $color-text;
   border-radius: $border-radius-normal;
 
   &.up {
     &:before {
       @include alert-arrow();
       top: -12px;
       left: 10px;
       border-color: transparent transparent $color-border transparent;
     }
 
     &:after {
       @include alert-arrow();
       top: -11px;
       left: 10px;
       border-color: transparent transparent white transparent;
     }
   }
 
   &.left {
     &:before {
       @include alert-arrow();
       left: -12px;
       top: 7px;
       border-color: transparent $color-border transparent transparent;
     }
 
     &:after {
       @include alert-arrow();
       left: -11px;
       top: 7px;
       border-color: transparent white transparent transparent;
     }
   }
 
   &.down {
     &:before {
       @include alert-arrow();
       left: 10px;
       top: 26px;
       border-color: $color-border transparent transparent transparent;
     }
 
     &:after {
       @include alert-arrow();
       left: 10px;
       top: 25px;
       border-color: white transparent transparent transparent;
     }
   }
 
   .tip-icon {
     float: left;
     margin-right: 4px;
 
     i {
       width: 16px;
       height: 16px;
       @include inline-block(baseline);
     }
   }
 
   .tip-message {
     float: left;
 
     p {
       margin: 0;
     }
   }
 }
 
 .tip-success {
   @include tip-color(#2dc12d);
 }
 
 .tip-warning {
   @include tip-color(#ffbb00);
 }
 
 .tip-error {
   @include tip-color(#ff2200);
 }
 
 .tip-info {
   @include tip-color(#1eb6f8);
 }
 //
 // Tooltip
 // ----------------------------------------------------------------------------------
 
 [class*="hint--"] {
   position: relative;
   display: inline-block;
   /**
    * tooltip arrow
    */
   /**
    * tooltip body
    */ }
   [class*="hint--"]:before, [class*="hint--"]:after {
     position: absolute;
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     visibility: hidden;
     opacity: 0;
     z-index: 1000000;
     pointer-events: none;
     -webkit-transition: 0.3s ease;
     -moz-transition: 0.3s ease;
     transition: 0.3s ease;
     -webkit-transition-delay: 0ms;
     -moz-transition-delay: 0ms;
     transition-delay: 0ms; }
   [class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
     visibility: visible;
     opacity: 1; }
   [class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
     -webkit-transition-delay: 100ms;
     -moz-transition-delay: 100ms;
     transition-delay: 100ms; }
   [class*="hint--"]:before {
     content: '';
     position: absolute;
     background: transparent;
     border: 5px solid transparent;
     z-index: 1000001; }
   [class*="hint--"]:after {
     background: rgba(0,0,0,0.75);
     color: white;
     padding: 8px 10px;
     font-size: 12px;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     line-height: 12px;
     white-space: nowrap; }
   [class*="hint--"][aria-label]:after {
     content: attr(aria-label);
     border-radius: $border-radius-normal; }
   [class*="hint--"][data-hint]:after {
     content: attr(data-hint); }
 
 [aria-label='']:before, [aria-label='']:after,
 [data-hint='']:before,
 [data-hint='']:after {
   display: none !important; }
 
 /**
  * source: hint-position.scss
  *
  * Defines the positoning logic for the tooltips.
  *
  * Classes added:
  * 	1) hint--top
  * 	2) hint--bottom
  * 	3) hint--left
  * 	4) hint--right
  */
 /**
  * set default color for tooltip arrows
  */
 .hint--top-left:before {
   border-top-color: rgba(0,0,0,0.75); }
 
 .hint--top-right:before {
   border-top-color: rgba(0,0,0,0.75); }
 
 .hint--top:before {
   border-top-color: rgba(0,0,0,0.75); }
 
 .hint--bottom-left:before {
   border-bottom-color: rgba(0,0,0,0.75); }
 
 .hint--bottom-right:before {
   border-bottom-color: rgba(0,0,0,0.75); }
 
 .hint--bottom:before {
   border-bottom-color: rgba(0,0,0,0.75); }
 
 .hint--left:before {
   border-left-color: rgba(0,0,0,0.75); }
 
 .hint--right:before {
   border-right-color: rgba(0,0,0,0.75); }
 
 /**
  * top tooltip
  */
 .hint--top:before {
   margin-bottom: -10px; }
 
 .hint--top:before, .hint--top:after {
   bottom: 100%;
   left: 50%; }
 
 .hint--top:before {
   left: calc(50% - 5px); }
 
 .hint--top:after {
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   transform: translateX(-50%); }
 
 .hint--top:hover:before, .hint--top:focus:before {
   -webkit-transform: translateY(-8px);
   -moz-transform: translateY(-8px);
   transform: translateY(-8px); }
 
 .hint--top:hover:after, .hint--top:focus:after {
   -webkit-transform: translateX(-50%) translateY(-8px);
   -moz-transform: translateX(-50%) translateY(-8px);
   transform: translateX(-50%) translateY(-8px); }
 
 /**
  * bottom tooltip
  */
 .hint--bottom:before {
   margin-top: -10px; }
 
 .hint--bottom:before, .hint--bottom:after {
   top: 100%;
   left: 50%; }
 
 .hint--bottom:before {
   left: calc(50% - 5px); }
 
 .hint--bottom:after {
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   transform: translateX(-50%); }
 
 .hint--bottom:hover:before, .hint--bottom:focus:before {
   -webkit-transform: translateY(8px);
   -moz-transform: translateY(8px);
   transform: translateY(8px); }
 
 .hint--bottom:hover:after, .hint--bottom:focus:after {
   -webkit-transform: translateX(-50%) translateY(8px);
   -moz-transform: translateX(-50%) translateY(8px);
   transform: translateX(-50%) translateY(8px); }
 
 /**
  * right tooltip
  */
 .hint--right:before {
   margin-left: -10px;
   margin-bottom: -5px; }
 
 .hint--right:after {
   margin-bottom: -14px; }
 
 .hint--right:before, .hint--right:after {
   left: 100%;
   bottom: 50%; }
 
 .hint--right:hover:before, .hint--right:focus:before {
   -webkit-transform: translateX(8px);
   -moz-transform: translateX(8px);
   transform: translateX(8px); }
 
 .hint--right:hover:after, .hint--right:focus:after {
   -webkit-transform: translateX(8px);
   -moz-transform: translateX(8px);
   transform: translateX(8px); }
 
 /**
  * left tooltip
  */
 .hint--left:before {
   margin-right: -10px;
   margin-bottom: -5px; }
 
 .hint--left:after {
   margin-bottom: -14px; }
 
 .hint--left:before, .hint--left:after {
   right: 100%;
   bottom: 50%; }
 
 .hint--left:hover:before, .hint--left:focus:before {
   -webkit-transform: translateX(-8px);
   -moz-transform: translateX(-8px);
   transform: translateX(-8px); }
 
 .hint--left:hover:after, .hint--left:focus:after {
   -webkit-transform: translateX(-8px);
   -moz-transform: translateX(-8px);
   transform: translateX(-8px); }
 
 /**
  * top-left tooltip
  */
 .hint--top-left:before {
   margin-bottom: -10px; }
 
 .hint--top-left:before, .hint--top-left:after {
   bottom: 100%;
   left: 0; }
 
 .hint--top-left:before {
   left: 20px; }
 
 .hint--top-left:hover:before, .hint--top-left:focus:before {
   -webkit-transform: translateY(-8px);
   -moz-transform: translateY(-8px);
   transform: translateY(-8px); }
 
 .hint--top-left:hover:after, .hint--top-left:focus:after {
   -webkit-transform: translateY(-8px);
   -moz-transform: translateY(-8px);
   transform: translateY(-8px); }
 
 /**
  * top-right tooltip
  */
 .hint--top-right:before {
   margin-bottom: -10px; }
 
 .hint--top-right:before, .hint--top-right:after {
   bottom: 100%;
   right: 0; }
 
 .hint--top-right:before {
   right: 20px; }
 
 .hint--top-right:after {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   transform: translateX(0); }
 
 .hint--top-right:hover:before, .hint--top-right:focus:before {
   -webkit-transform: translateY(-8px);
   -moz-transform: translateY(-8px);
   transform: translateY(-8px); }
 
 .hint--top-right:hover:after, .hint--top-right:focus:after {
   -webkit-transform: translateY(-8px);
   -moz-transform: translateY(-8px);
   transform: translateY(-8px); }
 
 /**
  * bottom-left tooltip
  */
 .hint--bottom-left:before {
   margin-top: -10px; }
 
 .hint--bottom-left:before, .hint--bottom-left:after {
   top: 100%;
   left: 0; }
 
 .hint--bottom-left:before {
   left: 20px; }
 
 
 .hint--bottom-left:hover:before, .hint--bottom-left:focus:before {
   -webkit-transform: translateY(8px);
   -moz-transform: translateY(8px);
   transform: translateY(8px); }
 
 .hint--bottom-left:hover:after, .hint--bottom-left:focus:after {
   -webkit-transform: translateX(0) translateY(8px);
   -moz-transform: translateX(0) translateY(8px);
   transform: translateX(0) translateY(8px); }
 
 /**
  * bottom-right tooltip
  */
 .hint--bottom-right:before {
   margin-top: -10px; }
 
 .hint--bottom-right:before, .hint--bottom-right:after {
   top: 100%;
   right: 0; }
 
 .hint--bottom-right:before {
   right: 20px; }
 
 
 .hint--bottom-right:hover:before, .hint--bottom-right:focus:before {
   -webkit-transform: translateY(8px);
   -moz-transform: translateY(8px);
   transform: translateY(8px); }
 
 .hint--bottom-right:hover:after, .hint--bottom-right:focus:after {
   -webkit-transform: translateY(8px);
   -moz-transform: translateY(8px);
   transform: translateY(8px); }
 
 /**
  * source: hint-sizes.scss
  *
  * Defines width restricted tooltips that can span
  * across multiple lines.
  *
  * Classes added:
  * 	1) hint--small
  * 	2) hint--medium
  * 	3) hint--large
  *
  */
 .hint--small:after,
 .hint--medium:after,
 .hint--large:after {
   white-space: normal;
   line-height: 1.4em; }
 
 .hint--small:after {
   width: 80px; }
 
 .hint--medium:after {
   width: 150px; }
 
 .hint--large:after {
   width: 300px; }
 
 /**
  * source: hint-theme.scss
  *
  * Defines basic theme for tooltips.
  *
  */
 [class*="hint--"] {
   /**
    * tooltip body
    */ }
   [class*="hint--"]:after {
     text-shadow: 0 -1px 0px black;
     box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
 
 /**
  * source: hint-color-types.scss
  *
  * Contains tooltips of various types based on color differences.
  *
  * Classes added:
  * 	1) hint--error
  * 	2) hint--warning
  * 	3) hint--info
  * 	4) hint--success
  *
  */
 /**
  * Error
  */
 .hint--error:after {
   background-color: #b34e4d;
   text-shadow: 0 -1px 0px #592726; }
 
 .hint--error.hint--top-left:before {
   border-top-color: #b34e4d; }
 
 .hint--error.hint--top-right:before {
   border-top-color: #b34e4d; }
 
 .hint--error.hint--top:before {
   border-top-color: #b34e4d; }
 
 .hint--error.hint--bottom-left:before {
   border-bottom-color: #b34e4d; }
 
 .hint--error.hint--bottom-right:before {
   border-bottom-color: #b34e4d; }
 
 .hint--error.hint--bottom:before {
   border-bottom-color: #b34e4d; }
 
 .hint--error.hint--left:before {
   border-left-color: #b34e4d; }
 
 .hint--error.hint--right:before {
   border-right-color: #b34e4d; }
 
 /**
  * Warning
  */
 .hint--warning:after {
   background-color: #c09854;
   text-shadow: 0 -1px 0px #6c5328; }
 
 .hint--warning.hint--top-left:before {
   border-top-color: #c09854; }
 
 .hint--warning.hint--top-right:before {
   border-top-color: #c09854; }
 
 .hint--warning.hint--top:before {
   border-top-color: #c09854; }
 
 .hint--warning.hint--bottom-left:before {
   border-bottom-color: #c09854; }
 
 .hint--warning.hint--bottom-right:before {
   border-bottom-color: #c09854; }
 
 .hint--warning.hint--bottom:before {
   border-bottom-color: #c09854; }
 
 .hint--warning.hint--left:before {
   border-left-color: #c09854; }
 
 .hint--warning.hint--right:before {
   border-right-color: #c09854; }
 
 /**
  * Info
  */
 .hint--info:after {
   background-color: #3986ac;
   text-shadow: 0 -1px 0px #1a3c4d; }
 
 .hint--info.hint--top-left:before {
   border-top-color: #3986ac; }
 
 .hint--info.hint--top-right:before {
   border-top-color: #3986ac; }
 
 .hint--info.hint--top:before {
   border-top-color: #3986ac; }
 
 .hint--info.hint--bottom-left:before {
   border-bottom-color: #3986ac; }
 
 .hint--info.hint--bottom-right:before {
   border-bottom-color: #3986ac; }
 
 .hint--info.hint--bottom:before {
   border-bottom-color: #3986ac; }
 
 .hint--info.hint--left:before {
   border-left-color: #3986ac; }
 
 .hint--info.hint--right:before {
   border-right-color: #3986ac; }
 
 /**
  * Success
  */
 .hint--success:after {
   background-color: #458746;
   text-shadow: 0 -1px 0px #1a321a; }
 
 .hint--success.hint--top-left:before {
   border-top-color: #458746; }
 
 .hint--success.hint--top-right:before {
   border-top-color: #458746; }
 
 .hint--success.hint--top:before {
   border-top-color: #458746; }
 
 .hint--success.hint--bottom-left:before {
   border-bottom-color: #458746; }
 
 .hint--success.hint--bottom-right:before {
   border-bottom-color: #458746; }
 
 .hint--success.hint--bottom:before {
   border-bottom-color: #458746; }
 
 .hint--success.hint--left:before {
   border-left-color: #458746; }
 
 .hint--success.hint--right:before {
   border-right-color: #458746; }
 
 /**
  * source: hint-always.scss
  *
  * Defines a persisted tooltip which shows always.
  *
  * Classes added:
  * 	1) hint--always
  *
  */
 .hint--always:after, .hint--always:before {
   opacity: 1;
   visibility: visible; }
 
 .hint--always.hint--top:before {
   -webkit-transform: translateY(-8px);
   -moz-transform: translateY(-8px);
   transform: translateY(-8px); }
 
 .hint--always.hint--top:after {
   -webkit-transform: translateX(-50%) translateY(-8px);
   -moz-transform: translateX(-50%) translateY(-8px);
   transform: translateX(-50%) translateY(-8px); }
 
 .hint--always.hint--top-left:before {
   -webkit-transform: translateY(-8px);
   -moz-transform: translateY(-8px);
   transform: translateY(-8px); }
 
 .hint--always.hint--top-left:after {
   -webkit-transform: translateX(-100%) translateY(-8px);
   -moz-transform: translateX(-100%) translateY(-8px);
   transform: translateX(-100%) translateY(-8px); }
 
 .hint--always.hint--top-right:before {
   -webkit-transform: translateY(-8px);
   -moz-transform: translateY(-8px);
   transform: translateY(-8px); }
 
 .hint--always.hint--top-right:after {
   -webkit-transform: translateY(-8px);
   -moz-transform: translateY(-8px);
   transform: translateY(-8px); }
 
 .hint--always.hint--bottom:before {
   -webkit-transform: translateY(8px);
   -moz-transform: translateY(8px);
   transform: translateY(8px); }
 
 .hint--always.hint--bottom:after {
   -webkit-transform: translateX(-50%) translateY(8px);
   -moz-transform: translateX(-50%) translateY(8px);
   transform: translateX(-50%) translateY(8px); }
 
 .hint--always.hint--bottom-left:before {
   -webkit-transform: translateY(8px);
   -moz-transform: translateY(8px);
   transform: translateY(8px); }
 
 .hint--always.hint--bottom-left:after {
   -webkit-transform: translateX(-100%) translateY(8px);
   -moz-transform: translateX(-100%) translateY(8px);
   transform: translateX(-100%) translateY(8px); }
 
 .hint--always.hint--bottom-right:before {
   -webkit-transform: translateY(8px);
   -moz-transform: translateY(8px);
   transform: translateY(8px); }
 
 .hint--always.hint--bottom-right:after {
   -webkit-transform: translateY(8px);
   -moz-transform: translateY(8px);
   transform: translateY(8px); }
 
 .hint--always.hint--left:before {
   -webkit-transform: translateX(-8px);
   -moz-transform: translateX(-8px);
   transform: translateX(-8px); }
 
 .hint--always.hint--left:after {
   -webkit-transform: translateX(-8px);
   -moz-transform: translateX(-8px);
   transform: translateX(-8px); }
 
 .hint--always.hint--right:before {
   -webkit-transform: translateX(8px);
   -moz-transform: translateX(8px);
   transform: translateX(8px); }
 
 .hint--always.hint--right:after {
   -webkit-transform: translateX(8px);
   -moz-transform: translateX(8px);
   transform: translateX(8px); }
 
 /**
  * source: hint-rounded.scss
  *
  * Defines rounded corner tooltips.
  *
  * Classes added:
  * 	1) hint--rounded
  *
  */
 .hint--rounded:after {
   border-radius: 4px; }
 
 /**
  * source: hint-effects.scss
  *
  * Defines various transition effects for the tooltips.
  *
  * Classes added:
  * 	1) hint--no-animate
  * 	2) hint--bounce
  *
  */
 .hint--no-animate:before, .hint--no-animate:after {
   -webkit-transition-duration: 0ms;
   -moz-transition-duration: 0ms;
   transition-duration: 0ms; }
 
 .hint--bounce:before, .hint--bounce:after {
   -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
   -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
   transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
 /*!
  * Viewer v0.6.1
  * https://github.com/fengyuanchen/viewer
  *
  * Copyright (c) 2014-2017 Fengyuan Chen
  * Released under the MIT license
  *
  * Date: 2017-10-07T09:53:32.834Z
  */
 
 .viewer-zoom-in::before,
 .viewer-zoom-out::before,
 .viewer-one-to-one::before,
 .viewer-reset::before,
 .viewer-prev::before,
 .viewer-play::before,
 .viewer-next::before,
 .viewer-rotate-left::before,
 .viewer-rotate-right::before,
 .viewer-flip-horizontal::before,
 .viewer-flip-vertical::before,
 .viewer-fullscreen::before,
 .viewer-fullscreen-exit::before,
 .viewer-close::before {
   background-image: url('');
   background-repeat: no-repeat;
   color: transparent;
   display: block;
   font-size: 0;
   height: 20px;
   line-height: 0;
   width: 20px;
 }
 
 .viewer-zoom-in::before {
   background-position: 0 0;
   content: 'Zoom In';
 }
 
 .viewer-zoom-out::before {
   background-position: -20px 0;
   content: 'Zoom Out';
 }
 
 .viewer-one-to-one::before {
   background-position: -40px 0;
   content: 'One to One';
 }
 
 .viewer-reset::before {
   background-position: -60px 0;
   content: 'Reset';
 }
 
 .viewer-prev::before {
   background-position: -80px 0;
   content: 'Previous';
 }
 
 .viewer-play::before {
   background-position: -100px 0;
   content: 'Play';
 }
 
 .viewer-next::before {
   background-position: -120px 0;
   content: 'Next';
 }
 
 .viewer-rotate-left::before {
   background-position: -140px 0;
   content: 'Rotate Left';
 }
 
 .viewer-rotate-right::before {
   background-position: -160px 0;
   content: 'Rotate Right';
 }
 
 .viewer-flip-horizontal::before {
   background-position: -180px 0;
   content: 'Flip Horizontal';
 }
 
 .viewer-flip-vertical::before {
   background-position: -200px 0;
   content: 'Flip Vertical';
 }
 
 .viewer-fullscreen::before {
   background-position: -220px 0;
   content: 'Enter Full Screen';
 }
 
 .viewer-fullscreen-exit::before {
   background-position: -240px 0;
   content: 'Exit Full Screen';
 }
 
 .viewer-close::before {
   background-position: -260px 0;
   content: 'Close';
 }
 
 .viewer-container {
   background-color: rgba(0, 0, 0, .5);
   bottom: 0;
   direction: ltr;
   font-size: 0;
   left: 0;
   line-height: 0;
   overflow: hidden;
   position: absolute;
   right: 0;
   -webkit-tap-highlight-color: transparent;
   top: 0;
   -webkit-touch-callout: none;
   -ms-touch-action: none;
   touch-action: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
 .viewer-container::-moz-selection,
 .viewer-container *::-moz-selection {
   background-color: transparent;
 }
 
 .viewer-container::selection,
 .viewer-container *::selection {
   background-color: transparent;
 }
 
 .viewer-container img {
   display: block;
   height: auto;
   max-height: none !important;
   max-width: none !important;
   min-height: 0 !important;
   min-width: 0 !important;
   width: 100%;
 }
 
 .viewer-canvas {
   bottom: 0;
   left: 0;
   overflow: hidden;
   position: absolute;
   right: 0;
   top: 0;
 }
 
 .viewer-canvas > img {
   height: auto;
   margin: 15px auto;
   max-width: 90% !important;
   width: auto;
 }
 
 .viewer-footer {
   bottom: 0;
   left: 0;
   overflow: hidden;
   position: absolute;
   right: 0;
   text-align: center;
 }
 
 .viewer-navbar {
   background-color: rgba(0, 0, 0, .5);
   overflow: hidden;
 }
 
 .viewer-list {
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
   height: 50px;
   margin: 0;
   overflow: hidden;
   padding: 1px 0;
 }
 
 .viewer-list > li {
   color: transparent;
   cursor: pointer;
   float: left;
   font-size: 0;
   height: 50px;
   line-height: 0;
   opacity: .5;
   overflow: hidden;
   width: 30px;
 }
 
 .viewer-list > li + li {
   margin-left: 1px;
 }
 
 .viewer-list > .viewer-active {
   opacity: 1;
 }
 
 .viewer-player {
   background-color: #000;
   bottom: 0;
   cursor: none;
   display: none;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
 }
 
 .viewer-player > img {
   left: 0;
   position: absolute;
   top: 0;
 }
 
 .viewer-toolbar {
   margin: 0 auto 5px;
   overflow: hidden;
   padding: 3px 0;
   width: 280px;
 }
 
 .viewer-toolbar > li {
   background-color: rgba(0, 0, 0, .5);
   border-radius: 50%;
   cursor: pointer;
   float: left;
   height: 24px;
   overflow: hidden;
   width: 24px;
 }
 
 .viewer-toolbar > li:hover {
   background-color: rgba(0, 0, 0, .8);
 }
 
 .viewer-toolbar > li::before {
   margin: 2px;
 }
 
 .viewer-toolbar > li + li {
   margin-left: 1px;
 }
 
 .viewer-toolbar > .viewer-play {
   height: 30px;
   margin-bottom: -3px;
   margin-top: -3px;
   width: 30px;
 }
 
 .viewer-toolbar > .viewer-play::before {
   margin: 5px;
 }
 
 .viewer-tooltip {
   background-color: rgba(0, 0, 0, .8);
   border-radius: 10px;
   color: #fff;
   display: none;
   font-size: 12px;
   height: 20px;
   left: 50%;
   line-height: 20px;
   margin-left: -25px;
   margin-top: -10px;
   position: absolute;
   text-align: center;
   top: 50%;
   width: 50px;
 }
 
 .viewer-title {
   color: #ccc;
   display: inline-block;
   font-size: 12px;
   line-height: 1;
   margin: 0 5% 5px;
   max-width: 90%;
   opacity: .8;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .viewer-title:hover {
   opacity: 1;
 }
 
 .viewer-button {
   background-color: rgba(0, 0, 0, .5);
   border-radius: 50%;
   cursor: pointer;
   height: 80px;
   overflow: hidden;
   position: absolute;
   right: -40px;
   top: -40px;
   width: 80px;
 }
 
 .viewer-button::before {
   bottom: 15px;
   left: 15px;
   position: absolute;
 }
 
 .viewer-fixed {
   position: fixed;
 }
 
 .viewer-open {
   overflow: hidden;
 }
 
 .viewer-show {
   display: block;
 }
 
 .viewer-hide {
   display: none;
 }
 
 .viewer-invisible {
   visibility: hidden;
 }
 
 .viewer-move {
   cursor: move;
   cursor: -webkit-grab;
   cursor: grab;
 }
 
 .viewer-fade {
   opacity: 0;
 }
 
 .viewer-in {
   opacity: 1;
 }
 
 .viewer-transition {
   -webkit-transition: all .3s;
   transition: all .3s;
 }
 
 @media (max-width: 767px) {
   .viewer-hide-xs-down {
     display: none;
   }
 }
 
 @media (max-width: 991px) {
   .viewer-hide-sm-down {
     display: none;
   }
 }
 
 @media (max-width: 1199px) {
   .viewer-hide-md-down {
     display: none;
   }
 }
 //
 // Zoom
 // ----------------------------------------------------------------------------------
 
 .zoom {
   display: block;
   position: relative;
 
   .shade {
     display: block;
     position: absolute;
     cursor: move;
     @include opacity(0.6);
     background-color: $color-background;
     border: 1px solid $color-border;
   }
 
   .magnifier {
     display: block;
     position: absolute;
     top: -1px;
     z-index: 10;
     overflow: hidden;
     background-color: $white;
     border: 1px solid $color-border;
 
     img {
       display: block;
       position: absolute;
     }
   }
 }
 .pop-confirm-component {
   position: absolute;
   min-width: 200px;
   max-width: 300px;
   padding: 12px 16px;
   color: rgba(0, 0, 0, .65);
   font-size: 14px;
   background-color: #fff;
   background-clip: padding-box;
   border-radius: $border-radius-normal;
   -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.15);
   box-shadow: 0 2px 8px rgba(0,0,0,.15);
 
   .title {
     position: relative;
     padding: 4px 0 12px 20px;
     line-height: 20px;
 
     i {
       position: absolute;
       top: 3px;
       left: 0;
     }
   }
 
   .footer {
     text-align: right;
 
     span {
       display: inline-block;
       height: 24px;
       font-size: 12px;
       line-height: 20px;
       padding: 0 7px;
       margin-left: 8px;
       border-radius: $border-radius-normal;
       border: 1px solid $color-border;
       cursor: pointer;
     }
 
     .confirm {
       color: #fff;
       border-color: $color-primary;
       background-color: $color-primary;
     }
   }
 
   .popover-arrow {
     position: absolute;
     width: 9px;
     height: 9px;
     background: #fff;
     border-color: transparent;
     border-style: solid;
   }
 
   &.top, &.bottom {
     .popover-arrow {
       left: 50%;
       transform: translateX(-50%) rotate(45deg);
     }
   }
 
   &.left, &.right {
     .popover-arrow {
       top: 50%;
       transform: translateY(-50%) rotate(45deg);
     }
   }
 
   &.top {
     .popover-arrow {
       bottom: -5px;
       box-shadow: 3px 3px 7px rgba(0, 0, 0, .07);
     }
   }
 
   &.right {
     .popover-arrow {
       left: -5px;
       box-shadow: -3px 3px 7px rgba(0, 0, 0, .07);
     }
   }
 
   &.bottom {
     .popover-arrow {
       top: -5px;
       box-shadow: -3px -3px 7px rgba(0, 0, 0, .07);
     }
   }
 
   &.left {
     .popover-arrow {
       right: -5px;
       box-shadow: 3px -3px 7px rgba(0, 0, 0, .07);
     }
   }
 
   &.success {
     i {
       color: $color-success;
     }
   }
 
   &.info {
     i {
       color: $color-info;
     }
   }
 
   &.warning {
     i {
       color: $color-warning;
     }
   }
 
   &.error {
     i {
       color: $color-danger;
     }
   }
 }
 